关于css3动画与H5动画的比较（2015年10月22日）

CSS3中我们通常通过transform(迅速的变化),transition(缓慢的变化),animation(关键帧动画)，这三个属性，实现简单的动画效果。

transform属性实现的动画效果是迅速的变化，他的语法是transform:rotate(ndeg)  scale(n);[两个变化的属性之间用空格号隔离开]通常被放在伪类选择器当中。在CSS当中，transform还可以被transition属性引用，当tranform被transition引用时，它的作用相当于形状的变化，利用下面代码来阐述它们之间的关系：

#iphone{
background-image:url(images/iphone6.jpg);
transition:transform2s linear;
}
#iphone:active{
transform:scaleZ(2) translateX(-300px); 

}

transition属性不会被放在伪类选择器当中，transition通常可以定义简单的一次性动画，它的作用相当于过渡，他的语法同animation相同。transition[animation]:要变化的属性名（animation为动画名）  持续时间  速度变化类型  [延迟时间];

animation属性可以实现关键帧动画，相对transition它可以控制物体的连续变化变化状态，要比transition灵活的多。但，相比于H5动画它还是有很多的局限性，①因为H5动画必须要通过javascript配合实现动画效果，所以H5动画可以实现更多的交互效果，如：事件的绑定效果。②另外CSS3要实现多步骤的动画必须定义多个坐标值，而H5可以通过javascript一些数据的算法实现多步骤的动画效果。③H5中的canvas在IE8当中不允许引入图片，而存在兼容性问题，并且旧版本的IE8及以下的版本的浏览器都不支持canvas。另外animation必须要定义关键帧。定义关键帧的语法如：

 @keyframes 动画名{
   	 from{开始样式}
         n%{当动画进度播放到n%时的样式}
         ...
         to{结束样式}
       }

	浏览器兼容性：	@keyframes animation Firefox IE（不用加）
			@-webkit-keyframes -webkit-animation Chrome Safari
			@-o-keyframes -o-animation Opera

animation同样不会被放在伪类选择器当中，通过上述我们可以知道这三个当做属性时候的用法，都需要触发伪类选择器，而CSS3实现动画的效果，可以完全不用靠javascript。

在分析H5当中的canvas动画和svg动画时，svg实现的动画效果和canvas实现动画效果时调用的方法基本上是一模一样，由于svg不能引入图片，导致了它做动画的局限性。