我已经开始学习
CSS3中的关键帧动画了.有人认为我注意到的是,无论我如何通过关键帧动画“定时”事物,过渡总是平滑的.
例如;背景颜色从50％变为100％,是动画从50％到100％播放的平滑过渡.
我想要实现的是一种通过“即时”类型的值更改来制作动画的方法.
再一次,一个例子是：
如果BG的50％值为红色且BG的100％值为蓝色;动画应保持红色直至达到100％,并在100％完成时立即变为蓝色.
我不确定我的术语是对还是错,但无论如何,某些方向都是完美的.
解决方法
您可以使用
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;
}
