好处是， transform 制作的动画会直接进入合成阶段，避开重排重绘，可以通过 Performance 录制面板来查看 transform 动画的效率。
MDN animation
深入浅出CSS动画
MDN animate()
监听 CSS animation 动画的事件:
这些监听事件对 animate() 是无效的。
页面顶部经常会见到水平无限轮播的公告。
由于轮播的内容是动态的，可能很多，也可能很少，如果公告内容的宽度没有超过最大宽度限制，那么就不应该轮播，如果超过了，则发起轮播。
假设我们永远只有一条最新的公告
原理：当一次动画执行结束时，影子内容的头部刚好对准轮播内容的初始位置，那么下次动画开始时，轮播内容将重新回到初始位置，由于影子内容与轮播内容相同，那么就给人造成一种无限轮播的错觉。
逻辑实现：父元素设置了 overflow: hidden ，又想要获取父元素、子元素的真实宽度，那么可以通过 scrollWidth 获取。
兼容性：如果不支持 animate() ，那么我们可以动态创建 <style>+ @keyframes ，插入 <head>, 但也要记得移除。
动画反复运行时,使用animation-direction属性指定动画是否反向播放。
当动画只运行一次时，指定该属性将不会出现效果。
.close { cursor: pointer display: inline-block width: 100px height: 100px border-radius: 50% background-color: #96CEB4 position: relative }i { color: #FFEEAD font-size: 48px position: absolute top: 8% left: 19% }
/*定义动画*/
@-webkit-keyframes spin { /*兼容性写法。spin是关键帧的动画名称*/
from { /*动画起始状态*/
-webkit-transform: rotate(0deg) }
to { /*动画结束状态*/
-webkit-transform: rotate(360deg) }
} @keyframes spin { from { transform: rotate(0deg) }
to { transform: rotate(360deg) }
} .close:hover i { -webkit-animation: spin 1s linear infinite/*鼠标hover时，i图标旋转,infinite表示动画无限循环*/
animation: spin 1s linear infinite
}123456789101112131415161718192021222324252627282930313233343536373839
解析：
keyframes：定义一个名为spin的关键帧动画。
from：指定动画的起始状态
to：指定动画的结束状态。
linear：动画匀速运动
infinite：表示动画无限循环
如果想让动画执行2次：
.close:hover i { -webkit-animation: spin 1s linear 2/*2代表动画执行2次*/
animation: spin 1s linear 2
}1234
如果想让两次动画之间有延迟（比如一次动画结束，停留2秒再次执行动画，并且执行2次）：
.close:hover i { -webkit-animation: spin 1s linear 2s 2 /*2s代表延迟2秒 2代表动画执行2次*/
animation: spin 1s linear 2s 2
}1234
还可以反向旋转（alternate表示偶数次数反向播放动画，如下代码是顺时针旋转一次后，再逆时针旋转一次）：
.close:hover i { -webkit-animation: spin 1s linear 2s 2 alternate /*2s代表延迟2秒 2代表动画执行2次*/
animation: spin 1s linear 2s 2 alternate
}1234
