前端动画的实现

动画的种类

• JavaScript 动画
• DOM 动画
• Canvas 动画
• CSS3 动画
• transition
• animation
• SVG 动画

Javascript动画

在javascript中，动画的实现分为DOM动画和Canvas动画。

DOM动画主要是通过不断修改元素的样式，来达到动画的效果，常见被用来做动画效果的样式left,right,top,bottom和transform。实际使用中transform的性能要优于其他的属性。如果无需考虑ie8及以下浏览器。大胆的使用transform。

Canvas是一个HTML5新引入的标签，拥有极其强大功能，我对这个标签并不是很熟悉，这里不做讨论，可以查看玩转html5 canva画图

CSS3动画

在css3中transform配合transition和伪类（例如:hover）可以实现一些简单的效果。

animation动画可以利用css3实现一些相对于transform来说比较复杂的动画效果。

SVG动画

SVG是可缩放矢量图形是基于可扩展标记语言，具体的使用可以看超级强大的SVG SMIL animation动画详解