好处是， transform 制作的动画会直接进入合成阶段，避开重排重绘，可以通过 Performance 录制面板来查看 transform 动画的效率。
MDN animation
深入浅出CSS动画
MDN animate()
监听 CSS animation 动画的事件:
这些监听事件对 animate() 是无效的。
页面顶部经常会见到水平无限轮播的公告。
由于轮播的内容是动态的，可能很多，也可能很少，如果公告内容的宽度没有超过最大宽度限制，那么就不应该轮播，如果超过了，则发起轮播。
假设我们永远只有一条最新的公告
原理：当一次动画执行结束时，影子内容的头部刚好对准轮播内容的初始位置，那么下次动画开始时，轮播内容将重新回到初始位置，由于影子内容与轮播内容相同，那么就给人造成一种无限轮播的错觉。
逻辑实现：父元素设置了 overflow: hidden ，又想要获取父元素、子元素的真实宽度，那么可以通过 scrollWidth 获取。
兼容性：如果不支持 animate() ，那么我们可以动态创建 <style>+ @keyframes ，插入 <head>, 但也要记得移除。
1、提前下载一个自己喜欢的动态星空视频，保存在自己手机相册内。2、打开微信，进入朋友圈，然后点击封面图，就会出现一个按钮，点击“换封面”进入到功能界面中进行更换。3、然后进入换封面的选择渠道中，用户可以选择不同的更换渠道，看自己的想法去选择，下面以视频号为例，点击从视频号选择。4、点击右上角一个相机的图片，然后选择你相册内的动态星空视频进行发布。5、然后再从视频号选择的页面，点击我的发表，选择动态星空视频，点击确定即可。微信最新推出了一个朋友圈封面可以使用视频的功能，让我们朋友圈可以更加的丰富，可以使用动态视频，放我们自己自定义的视频，让好友一进朋友圈显的格外靓丽、活泼。
可以做一个animation，举一个例子，让一个元素在某一个范围之内，左距离和上距离同时改变。但是，弧线要让两个距离改变速度变化不一致，所以最好一个元素改变上方距离（可以是top也可是margin-top），里面嵌入一个元素改变左边距离。例如，假如你要让横轴均匀变化，纵轴不均匀变化，轨迹为⌒形，可以左变化为{from{margin-left:0px}to{margin-left:200px}}，运动方式设为linear，然后上下变化可以{from{margin-top:100px}50%{margin-top:0px}to{margin-top:100px}}，运动方式设为ease-in-out。由于时间仓促我没有具体实验过，而且表达可能不太清楚，请原谅。
