animation-direction等于normal。
动画循环播放时,每次都是从结束状态跳回到起始状态,再开始播放。animation-direction属性,可以改变这种行为。
比如那种灯光闪烁的效果,默认normal会比较生硬,所以,可以试试改变animation-direction的值,来优化这个效果
下面看一个例子,来说明如何使用animation-direction。假定有一个动画是这样定义的。
@keyframes rainbow {
0% { background-color: yellow; }
100% { background: blue; }
}
div:hover {
animation: 1s rainbow 3 normal;
}
animation-direction指定了动画播放的方向,最常用的值是normal和reverse。浏览器对其他值的支持情况不佳,不过目前移动端还可以,可以尝试~
最近做一个闪烁的效果就是用了, alternate & alternate-reverse 效果很赞