动画说白了就是不同动画帧的连续播放。
css处理动画有两种方式，一种是过渡属性，一种就是动画属性
过渡动画
过渡动画我们只需要定义两帧，开始帧和结束帧，然后定义一个过渡属性，浏览器会自动将开始状态过渡到结束状态，所以对于突变的属性，如display是不能过渡的。
动画属性
css提供了animation属性，它提供了更好的动画效果。前面说的过渡动画只有两帧，而动画属性提供了动画从0-100%变化时的过程，可以编写0-100%之间的任意时刻的动画帧。
js动画
利用js的setTimeout、setInterval、requestAnimationFrame也可以实现动画。
js实现动画的原理和过渡动画的原理类似，都是从开始帧过渡到结束帧。不过过渡动画是通过过渡属性定义过渡时长，浏览器在指定时间内播放动画。而js动画是自己定义动画刷新频率和时长。为了让js动画流畅，setTimeout和setInterval就要定义最短的间隔时间如16，这样可能出现浏览器来不及处理动画，而时间太长又会出现动画不流畅，所以HTML5提供了新的动画API：requestAnimationFrame，requestAnimationFrame会以浏览器的最佳刷新频率去执行动画。js动画时长是由每次改变的步长决定的。