好处是， transform 制作的动画会直接进入合成阶段，避开重排重绘，可以通过 Performance 录制面板来查看 transform 动画的效率。
MDN animation
深入浅出CSS动画
MDN animate()
监听 CSS animation 动画的事件:
这些监听事件对 animate() 是无效的。
页面顶部经常会见到水平无限轮播的公告。
由于轮播的内容是动态的，可能很多，也可能很少，如果公告内容的宽度没有超过最大宽度限制，那么就不应该轮播，如果超过了，则发起轮播。
假设我们永远只有一条最新的公告
原理：当一次动画执行结束时，影子内容的头部刚好对准轮播内容的初始位置，那么下次动画开始时，轮播内容将重新回到初始位置，由于影子内容与轮播内容相同，那么就给人造成一种无限轮播的错觉。
逻辑实现：父元素设置了 overflow: hidden ，又想要获取父元素、子元素的真实宽度，那么可以通过 scrollWidth 获取。
兼容性：如果不支持 animate() ，那么我们可以动态创建 <style>+ @keyframes ，插入 <head>, 但也要记得移除。
CSS3中新增了动画相关的属性，其中@keyframes规则用于设置创建动画，其原理其实就是将一套css样式逐渐变成另外一套css样式，在@keyframes中可以使用百分比表示动画进度对应的样式，0% 是动画的开始样式，100% 动画的结束样式，每个样式可以称为"关键帧样式"，每个动画可以包含很多帧，每一帧可以设置一个或多个样式。语法格式: @keyframes 动画名:{0%:{css样式} ... 100%:{css样式}} ，其中关键帧合法值是0-100%，from与 0% 相同，to与 100% 相同
使用@keyframes定义了动画，那如何使用呢？
那就得在对应要使用该动画的元素上添加animation属性
animation是一个复合属性，是所有动画属性的缩写，除animation-play-state
1. animation-name 动画名，表示要应用哪个动画
2. animation-duration 动画完成一个周期所花费的时间（秒或毫秒数），默认0
3. animation-timing-function 表示动画速度曲线，常用关键字linear、ease、ease-in、ease-out、ease-in-out，默认是ease。还可以使用cubic-bezier(n,n,n,n)设置
4. animation-delay 动画延迟时间，默认0
5. animation-iteration-count 动画播放次数，默认1 只播一次
6. animation-direction 设置动画在下个播放周期是否逆转方向，默认是 "normal"正常播放，alternate轮流反向播放
7. animation-fill-mode 用于设置动画填充模式，none 不改变默认行为；forwards当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）；backwards在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）；both向前和向后填充模式都被应用
8. animation-play-state 设置动画播放状态，paused动画已暂停，running是默认值，表示动画正在运行播放
