前端动画的实现方式

动画的实现方式有两种：一种是通过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更多