CSS3 transition与animation

前一段时间项目上需要我在webkit核心的浏览器上，做一套比较炫的UI。开始准备采用canvas，不过发现canvas的执行效率不佳，虽然也做了刷新区域优化。为了凸显3D特效，又考虑是否需要采用WEBGL，不过，3D模型创建比较复杂项目进度也不允许。最后，采用了CSS3.

CSS3优点是开发速度快，而且支持3D渲染加速。缺点是，目前支持不够规范，另外反锯齿比较差。

今天先记录一下使用transition和animation的感受，日后再加上相关补充。

transition是属性变化，当DOM元素初始化好后，已经具备了初始状态。使用transition可以让该元素的属性状态平滑过渡到新的状态。这点和JQuery的animation函数很像，不过执行过程是由浏览器内核自动处理，而且也支持多个变化函数(easing function)具体操作可以参照W3C文档：http://www.w3.org/TR/css3-transitions/ 

animation则完全是动画，虽然也是根据DOM元素的当前状态衍生变化，但并不会修改DOM元素的属性值。当动画执行完成后，元素会回到初始值。与transition的区别还有，animation支持keyframes，也就是flash动画中的关键帧。应该transition以后的版本也会支持，不过目前的webkit浏览器中transition对keyframes的支持还是不足。keyframes的好处是可以定义动画的中间帧，当然也可以通过设置多个连续的transition达到同样的效果。animation还有一个属性是播放次数。具体内容参照W3C文档：http://www.w3.org/TR/css3-animations/

在使用transition和animation的过程中，我发现，因为计算性能或者其它原因，使用连续的transition因为要依赖上一次transition的执行结果，经常容易出错，导致动画变得很诡异。最终还是选择animation代替了transition(元素属性转换直接赋值，动画则采用animation)，虽然代码量增大了许多，但是却能保证动画执行与元素属性状态修改相互独立，即使中间帧数出现问题，动画异常，也不会导致元素状态混乱。

举个例子，我们在每次用户按下右键时，元素沿Y轴旋转30度。

transition的写法：

-webkit-transition:all .2s linear;-webkit-transform:rotateY(30deg);

animation的写法：

-webkit-animation: spin 3s infinite linear;

@-webkit-keyframes spin {
  0%   { -webkit-transform:rotateY(0); }
  100% { -webkit-transform:rotateY(30deg); }
}

当在运算能力较弱的机器上，连续按键时，transition的写法就容易出问题。