前端写动画，无非两种方案，一种是通过css，另一种是js
css的方案：
1.transform的单独使用 （IE9+）
rotate(90deg) 2d旋转，也可以理解为沿着3D的Z轴旋转
rotateX(90deg) 沿着3D的X轴旋转,同理还有rotateY rotateZ
translate(100px, 50px) 沿着X方向 Y方向移动100px, 50px
scale(2) 缩放 定义 2D 缩放转换。
skew 斜切 沿着 X 和 Y 轴的 2D 倾斜转换 （平行四边形、梯形的实现）
更详细的transform属性请点击 http://www.w3school.com.cn/cssref/pr_transform.asp
2.transition的单独使用 （IE10及以上)
元素指定的属性变化时，该属性经过一段时间逐渐的过渡到最终需要的值
特点:需要事件(hover,focus,js)触发，不能重复，不能定义中间状态
- transition-property css属性名称(所有属性 'all')
- transition-duration 过渡时间
- transition-timing-function 速度曲线
- transition-delay 延迟时间
四个属性可以简写，如 transition: width 1s ease 0.2s
3.animation单独使用 （IE10及以上)
- animation-name key-frame名称
- animation-duration 过渡时间
- animation-timing-function 速度曲线
- animation-delay 延迟
- animation-iteration-count 播放次数 无限'infinite'
- animation-direction 是否应该轮流反向播放
六个属性可以简写
transition和animation的差异:
1.transition动画的执行过程就是声明关键帧的过程，而animation动画的事先声明关键帧(@keyframes)，然后再调用关键帧
2.transition动画的执行需要有事件(hover、点击事件)来驱动，而animation动画的执行不一定需要驱动
3.transition 不能无限循环，不能指定播放次数，只能定义头尾帧。
animation与transform的混合应用demo：
.App-logo {
position: absolute;
top: 10px;
left: 10px;
animation: App-logo-spin infinite 2s linear;
height: 80px;
}
@keyframes App-logo-spin {
50% {
transform: translate(100px, 100px) // 使用translate代替absolute
// top: 100px;
// left: 100px;
}
}
js的方案
1.setTimeOut/setInterval （不推荐）
2.requestAnimationFrame（兼容性ie10以上）
关于requestAnimationFrame
window.requestAnimationFrame()接收一个函数作为回调，返回一个id
window.cancelAnimationFrame()传入id取消动画
为什么推荐使用requestAnimationFrame而不是setTimeOut/setInterval？
1.requestAnimationFrame 会把每一帧的所有DOM操作集中起来，在一次重绘或回流中完成。且重绘或回流的时间间隔紧跟随浏览器的刷新频率
3.在隐藏或不可见的元素中，requestAnimationFrame将不会重绘和回流，节省的CPU、GPU、内存使用
4.requestAnimationFrame是浏览器专为动画提供的API，浏览器会自动优化方法的调用，若页面不是激活状态，动画自动暂停，节省CPU
最后的总结
1. 尽可能的使用CSS 关键帧动画或者CSS transition。浏览器可以优化大量绘制和组合的时间。
2. 如果一定使用基于JS的动画，尽量使用requestAnimationFrame。尽量不要使用setTimeout， setInterval。
3. 尽量不要在每一帧上改变inline元素，浏览器可以在多方面优化css中声明式动画。
4. 使用2D transforms来代替position:absolution将会显著的提高FPS（每秒传输帧数),因为2D transform有更少的绘制时间和更流畅的动画。 通过改变元素top/left进行动画，在每一帧内，cpu都需要计算该元素的其他样式，特别是相对需要复杂计算的盒阴影，渐变，圆角等样式，最后都需要将这些样式应用到该元素内。从这个角度看，如果对于较为老旧的移动设备进行相对复杂的动画，那么效果肯定不理想。
而通过调用translate，会启动硬件加速，即在GPU层对该元素进行渲染。这样，CPU就会相对解放出来进行其他的计算，GPU对样式的计算相对较快，且保证较大的帧率。我们可以通过2d和3d的transform来启用GPU计算。
5. chrome(版本69.0)可以通过Timeline Frams模式来观测什么让你变慢
6.chrome(版本69.0)可以通过animations来对动画进行微调
6.文章排版还有待加强