- 1python面向对象版学生管理系统_学生信息管理系统python面向对象封装
- 2[MAC] 编译安装和测试《魔兽世界》模拟服务端 TrinityCore
- 3Python deepFM推荐系统，推荐算法，deepFM源码实战，deepFM代码模板
- 4CrossOver V2021.20汉化补丁Mac安装Windows免费软件_crossout中文补丁
- 5GPT-4的新玩法：智能应用探索之路_gpt4用于编程选哪个功能
- 6springMVC/boot的Echart图表数据展示_springmvc引入echarts5.3
- 7爬虫实战5：爬取百度图片_爬虫实现可视化爬取百度图片案例
- 8caioj1035:递归5（ n皇后问题）_输入格式: 一个整数 n。 输出格式: 每行输出一种方案,每种方案顺序输出皇后所在的
- 910大最常用的iptables规则_dports ssh
- 102024年蚂蚁金服面经（Java岗、交叉面、P6+、已入职，面试技巧训练_蚂蚁金服java面试
html循环效果关键帧动画,html – 关键帧动画 – 即时更改
赞
踩
您可以使用
steps作为计时功能暂停动画直到下一个关键帧
CSS：
-webkit-animation-timing-function: steps(1,end);
-moz-animation-timing-function: steps(1,end);
-ms-animation-timing-function: steps(1,end);
-o-animation-timing-function: steps(1,end);
animation-timing-function: steps(1,end);
示例代码：
@keyframes quick {
0% {
background-color:green;
}
50% {
-webkit-animation-timing-function: steps(1,end);
-moz-animation-timing-function: steps(1,end);
-ms-animation-timing-function: steps(1,end);
-o-animation-timing-function: steps(1,end);
animation-timing-function: steps(1,end);
background-color:blue;
}
100% {
background-color:red;
}
}
@-o-keyframes quick {
0% {
background-color:green;
}
50% {
-o-animation-timing-function: steps(1,end);
background-color:blue;
}
100% {
background-color:red;
}
}
@-moz-keyframes quick {
0% {
background-color:green;
}
50% {
-moz-animation-timing-function: steps(1,end);
background-color:blue;
}
100% {
background-color:red;
}
}
@-webkit-keyframes quick {
0% {
background-color:green;
}
50% {
-webkit-animation-timing-function: steps(1,end);
background-color:red;
}
100% {
background-color:blue;
}
}
body {
height:100%;
width:100%;
animation:quick 3s;
-moz-animation:quick 3s;
-webkit-animation:quick 3s;
-o-animation:quick 3s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
- 一、htmlHTML>
Home [详细] -->赞
踩
