好处是， transform 制作的动画会直接进入合成阶段，避开重排重绘，可以通过 Performance 录制面板来查看 transform 动画的效率。
MDN animation
深入浅出CSS动画
MDN animate()
监听 CSS animation 动画的事件:
这些监听事件对 animate() 是无效的。
页面顶部经常会见到水平无限轮播的公告。
由于轮播的内容是动态的，可能很多，也可能很少，如果公告内容的宽度没有超过最大宽度限制，那么就不应该轮播，如果超过了，则发起轮播。
假设我们永远只有一条最新的公告
原理：当一次动画执行结束时，影子内容的头部刚好对准轮播内容的初始位置，那么下次动画开始时，轮播内容将重新回到初始位置，由于影子内容与轮播内容相同，那么就给人造成一种无限轮播的错觉。
逻辑实现：父元素设置了 overflow: hidden ，又想要获取父元素、子元素的真实宽度，那么可以通过 scrollWidth 获取。
兼容性：如果不支持 animate() ，那么我们可以动态创建 <style>+ @keyframes ，插入 <head>, 但也要记得移除。
像这种效果，你要想知道，
已经下载下来，你拆开看一下就知道了。
说说原理，这里并不是纯css3，，只是用css3定义好动画，
@-moz-keyframes tips {
0% {box-shadow: 0px 0px 0px #f00}
25% {box-shadow: 0px 0px 8px #f00}
50% {box-shadow: 0px 0px 0px #f00}
100% {box-shadow: 0px 0px 8px #f00}
}
然后，js在切屏后，用Js来触发这一个样式，这个样式调用了刚才定义的动画。
.tips {
-webkit-animation:tips 1s
-moz-animation:tips 1s
}
当然css3是可以做的，只是用纯css3，就没办法像这样可以拖动切屏，这个是需要js或者jq来完成。。。
鼠标悬停，图标会一直不停旋转。
如果实现图标一直不停旋转，则需要使用animation动画。先制作动画的各个关键帧，然后在图标中运用这一动画。
具体操作如下：
