动画的实现方式有两种：一种是通过CSS来实现，一种是通过JS来实现。
CSS实现：
1、CSS3的transition结合元素位置、形状等属性的改变来完成。
2、通过keyframe和animation来定义动画。
JS实现：
1、通过定时器实现。
2、通过requestAnimationFrame来实现。
应用场景：
transition：一般用于过渡性动画，且动画运动方式单一。如淡出，滑入等等。
animation：可用于过渡性动画，也可用于持续性动画。动画的运动方式灵活，可在keyframe里面按进程百分比来调节动画。
定时器：不怎么使用的方法。无用渲染耗内存。
requestAnimationFrame：着重讲一下这个。
requestAnimationFrame和transition、animation都是按贞来渲染的，就渲染性能来说，他们差不多。
但是
1、比如对于IE8，9实现淡入淡出，css3比较难，要用js setTimeout实现，所以用requestAnimation更方便
2、CSS3不能应用在所有的属性上面，比如scrollTop，所以要用js实现，这时候可以用requestAnimation
3、CSS3动画曲线有限，requestAnimation更多
原文：https://www.cnblogs.com/4man1woman/p/10382698.html