animation-direction

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;
}

image.png

animation-direction指定了动画播放的方向，最常用的值是normal和reverse。浏览器对其他值的支持情况不佳，不过目前移动端还可以，可以尝试~
最近做一个闪烁的效果就是用了， alternate & alternate-reverse 效果很赞