本文介绍了CSS中用于动画时间函数的steps()，它允许你在动画过程中设置精确的暂停点，实现关键帧间的定步进效果。示例代码展示了如何通过steps(1,end)使背景颜色在绿色、蓝色和红色之间平滑过渡，每个颜色保持一定时间不变。
您可以使用
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;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
