一个好的前端界面中很重要的内容就是动画，使用符合场景的动画不仅可以优化网站页面中的交互细节，提高用户体验，还可以让页面更具有吸引力，给网站带来更多访问量。通常在前端中，实现动画的方案主要有6种，接下来，小编带你们一一解析这6中实现方案。

JavaScript直接实现动画

JavaScript直接实现动画的方式在前端早期使用较多，起主要的思想是通过JavaScript的setInterval方法或setTimeout方法的回调函数来持续调用改变某个元素的CSS样式以打到元素样式持续变化的结果。例如jQuery的animate()方法就属于这种实现方式不过需要注意的是，通过JavaScript实现动画通常会导致页面频繁重排重绘，很消耗性能，如果是稍微复杂的动画，在性能交差的浏览器上就会明显感觉到卡顿，所以我们尽量避免使用它。

SVG动画

SVG又称可伸缩矢量图形，源生支持一些动画效果，通过组合可以生成较复杂的动画，而且不需要使用JavaScript参与控制。以前这种动画实现的场景相对比较多，但随着CSS3的出现，这种动画实现方式相对使用的越来越少。

CSS3 transiton

CSS3出现后，增加了来年各种实现动画的方式：transition和animation，我们先来看看高效强大的CSS3过度动画transition。其实transiton并不能实现独立的动画，只能在某个标签元素样式或状态改变时进行平滑的动画过度，而不是马上改变。在移动端开发中，直接使用transition动画会让页面变慢甚至变卡顿，所以我们通常通过添加transform:translate3D(0,0,0)或transform:translateZ(0)来开启移动端动画的GPU加速，让动画过程更加流畅。

CSS3 animation

CSS3 animation的动画则可以认为是真正意义上页面内容的CSS3动画，通过对关键帧和循环稀疏的控制，页面标签元素会根据设定好的样式改变进行平滑过度。而且关键帧的状态的控制一般是通过百分比来控制的，这样我们就可以在这个过程中实现很多动画的动作了。

Canvas动画

canvas作为HTML5的新增元素，也可以借助Web API实现页面动画。Canvas动画的实现思路和SVG的思路有点类似，都是借助元素标签来打到页面动画的效果，都需要借助对应的一套API来实现，不过SVG的API可以认为主要是通过SVG元素内部的配置规则来实现的，而Canvas则是通过JavaScript API来实现的。

requestAnimationFrame

requestAnimationFrame是前端表现层实现动画的另一种API实现，他的原理和setTimeout及setInerval类似，但是他是浏览器针对动画专门优化而形成的API，在实现动画方面性能比setInterval要好。

总结

考虑到兼容性的问题，在项目实践中，一般我们在桌面浏览器端任然推荐使用JavaScript直接实现动画的方式或SVG动画的实现方式，移动端则可以考虑使用CSS3 、canvas或requestAnimationFrame。

关注更多前端开发资讯，请关注小编最小白的小白，小白和大家共同进步。