CSS3中的动画

css3主要通过三个代理完成大部分动画工作。过渡(transition)，变形(transform)和动画(animation)。

当知道动画的起始状态和终止状态，并且需要一个简答的变形方法时，使用CSS过渡(transition)。

当需要在视觉上改变某个元素但又不想影响页面布局的时候，使用CSS变形(transform)。

当想在一个元素上执行一系列关键帧动画时，使用CSS动画(animation)。

动画不能从display:none;状态开始过渡。当某个元素被设为display:none;的时候，事实上它没有被“绘制”在屏幕上，所以没有状态进行过渡。为了创造渐进的效果，需要修改opacity或者position的值。并非所有属性都可以进行过渡。

过渡相关的属性

过渡可以用四个属性声明：

transition-property:要过渡的CSS属性的名字；

transition-duration:定义过渡效果持续的时长。

transition-timing-function:定义过渡期间的速度变化。linear：规定以相同速度开始至结束的过渡效果（等于cybic-bezier(0,0,1,1))。ease:规定慢速开始，然后变快，然后慢速结束的过渡效果(等于cubic-bezier(0.25,0.1,0.25,1))。ease-in:规定以慢速开始的过渡效果(等于cubic-bezier(0.42,0,1,1))。ease-out:规定以慢速结束的过渡效果(等于cubic-bezier(0,0,0.58,1))。ease-in-out:规定以慢速开始和结束的过渡效果(等于cubic-bezier(0.42,0,0.58,1))。cubic-bezier(n,n,n,n)在cubic-bezier函数中定义自己的值。可能的值是0至1之间的数值。

transition-delay:可选，用于定义过渡开始前的延迟时间。相反，将值设置为一个负数，可以让过渡效果立即开始，但过渡旅程会在半路结束。同样是用秒进行定义。

transition可以简写：跟时间相关的值会被应用到transition-duration,第二个应用到transition-delay上。定义那些真正需要过渡的属性。定义成all是方便的。但是会加重浏览器的负担。

当一条规则要实现多个属性过渡时，这些属性不必步调一致。

.style{
  transition-property:boder,color,text-shadow;
  transition-duration:2s,3s,8s;  
}

过渡调速函数：它们就是预置好的贝塞尔曲线，本质上是缓动函数。可视化这些曲线通常更简单，http://cubic-bezier.com/ 可以直接调节函数。