实现动画的4种方式

制作动态的网页是是前端工程师必备的技能，很好的实现动画能够极大的提高用户体验，增强交互效果，那么动画有多少实现方式，一直对此有选择恐惧症的我就总结一下，以便在开发的时候选择最好的实现方式。

CSS transitions

CSS transitions 提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。

语法：

transition: property duration timing-function delay;

1.property:填写需要变化的css属性如：width,line-height,font-size,color等;2.duration:完成过渡效果需要的时间（2s 或者2000ms）3.timing-function:完成效果的速度曲线（linear,ease,ease-in,ease-out等等）4.delay:动画开始之前的延迟

tansition抓住了所设置变化属性的起始态和完成态，通过设定的速度曲线来完成动画。可以涉及到各种变化的css属性，默认为all，则所有变化的属性都会在出发时，以动画的形式展现出来。

CSS animation

animation 算是真正意义上的CSS3动画。通过对关键帧和循环次数的控制，页面标签元素会根据设定好的样式改变进行平滑过渡。而且关键帧状态的控制是通过百分比来控制的。

语法：

animation: name duration timing-function delay iteration-count direction;

1.name:keyframe的名称，也就是定义了关键帧的动画的名称,这个名称用来区别不同的动画。2.duration:完成动画所需要的时间（2s 或者 2000ms）3.timing-function:完成动画的速度曲线4.delay：动画开始之前的延迟5.iteration-count：动画播放次数6.direction：是否轮流反向播放动画（normal:正常顺序播放，alternate下一次反向播放）如果把动画设置为只播放一次，则该属性没有效果。

使用animation属性制作动画可以更加灵活的设置动画帧，通过不同keyframe（动画帧）的设置，实现很多优雅的效果，keyframe中的百分数是动画完成总时间的比例。

原生js动画

原生js动画利用js代码，将动画一步以函数的方式写出来，可以实现多种动画样式，而且可以自己做兼容性处理，自己设立每一步的动画效果，并且能够完成比较复杂的效果，但是代码量很大。

其主要思想是通过setInterval或setTimeout方法的回调函数来持续调用改变某个元素的CSS样式以达到元素样式变化的效果。

javascript 实现动画通常会导致页面频繁性重排重绘，消耗性能，一般应该在桌面端浏览器。在移动端上使用会有明显的卡顿。

requestAnimationFrame是另一种Web API，原理与setTimeout和setInterval类似，都是通过javascript持续循环的方法调用来触发动画动作。但是requestAnimationFrame是浏览器针对动画专门优化形成的APi，在性能上比另两者要好。

canvas动画

canvas作为H5新增元素，是借助Web API来实现动画的。canvas使用的地方非常多，尤其是在制作h5小游戏上。

同样都是使用编码的方式由前端开发工程师完成动画效果，canvas要比原生js效率高的多，流畅的多。通过画笔的方式，能够轻松的实现更多的动画效果。但是相对复杂。

完