Css3 Transition动画效果

Transition 的作用和基本原理，就是通过某些css 属性值的渐变(从一个值过度到另一个值)，达到简单的动画效果。

举例

例如，我们希望 ‘left’ 属性和 ‘background-color’ 属性的改变可以在2秒之内渐变过度，颜色由红色变成蓝色，横坐标由小变大，这些都是可以通过 transition 来实现的。
p {
transition-property: width, background-color;
transition-duration: 2s;
}
在上述代码的基础上，每次对div的横坐标和背景色进行修改，其属性值都不会立刻切换生效，而是渐变生效，历时2秒钟。

transition-property 属性

Name: transition-property
Value: none | all | [ 〈IDENT〉 ] [ ‘,’ 〈IDENT〉 ]*
Initial: all
Applies to: all elements, :before and :after pseudo elements
Inherited: no
Percentages: N/A
Media: visual
Computed value :Same as specified value.
属性值 none 表示没有任何动画效果；
属性值 all 表示所有可变换动画的属性都有动画效果
还可以以各个属性的属性名作为属性值，或者多个属性名，以逗号隔开

当然了，如果你把 transition-duration 设为 0 的话，这里怎么设置都不会有动画效果的。

transition-duration 属性

Name: transition-duration
Value: 〈time〉 [, 〈time〉]*
Initial: 0
Applies to: all elements, :before and :after pseudo elements
Inherited: no
Percentages: N/A
Media: interactive
Computed value: Same as specified value.

写个代表时间的数字即可，比如 2s。也可以写多个，用逗号隔开。默认值是 0，即无动画效果。

transition-timing-function 属性

用来定义动画的渐变公式——相信看过此部分 W3C 文档的人会吐血的，没错，贝塞尔大叔又出现了。。。
Name: transition-timing-function
Value: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(〈number〉, 〈number〉, 〈number〉, 〈number〉) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(〈number〉, 〈number〉, 〈number〉, 〈number〉)]*
Initial: ease
Applies to: all elements, :before and :after pseudo elements
Inherited: no
Percentages: N/A
Media: interactive
Computed value: Same as specified value.
个人觉得大家理解 ease/linear 就行了，稍微进阶点可以再看看 ease-in/ease-out/ease-in-out，至于那个 cubic-bezier 神马的，感兴趣的自己慢慢琢磨吧。推荐一篇文章：http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html (准确的讲不是推荐文章本身，而是里面的那个 transition-timing-function 预览功能)

transition-delay 属性

Name: transition-delay
Value: 〈time〉 [, 〈time〉]*
Initial: 0
Applies to: all elements, :before and :after pseudo elements
Inherited: no
Percentages: N/A
Media: interactive
Computed value: Same as specified value.
动画执行的延迟时间，同样是写时间值，属性值写法和 transifion-duration 类似，这里不做过多介绍。

transition 简写属性

Name: transition
Value: [〈‘transition-property’〉 || 〈‘transition-duration’〉 || 〈‘transition-timing-function’〉 || 〈‘transition-delay’〉 [, [〈‘transition-property’〉 || 〈‘transition-duration’〉 || 〈‘transition-timing-function’〉 || 〈‘transition-delay’〉]]*
Initial: see individual properties
Applies to: all elements, :before and :after pseudo elements
Inherited: no
Percentages: N/A
Media: interactive
Computed value: Same as specified value.
依次是属性名、时间间隔、渐变公式、延迟时间，不同的属性名可以写多个这样的组合，用逗号隔开。
p {
transition: color 2s ease 1s, width 0.5s;
}

值得注意的几个地方

首先，属性值在变换的过程中，可以用js取得中间值，这在 duration 时间比较长的时候可以很明显的感受到。
其次，property 的属性值必须是具有动画变换能力的属性名，以下是这类属性名的整理和归类：
颜色值(color)、长度(length)、百分比(percentage)、整数(integer)、数字/实数(number/floating point)、tranform列表(transform list)、矩形坐标(rectangle)、可视状态(visibility)、阴影(shadow)、梯度渐变映射(gradient)等，当然还有由上述属性名组合的用逗号隔开的列表(spece-separated list of above)，或者上述属性名的缩写(shorthand property)。
在具体一点，如下对应关系：
background-color color
background-image only gradients
background-position percentage, length
border-bottom-color color
border-bottom-width length
border-color color
border-left-color color
border-left-width length
border-right-color color
border-right-width length
border-spacing length
border-top-color color
border-top-width length
border-width length
bottom length, percentage
color color
crop rectangle
font-size length, percentage
font-weight number
grid-* various
height length, percentage
left length, percentage
letter-spacing length
line-height number, length, percentage
margin-bottom length
margin-left length
margin-right length
margin-top length
max-height length, percentage
max-width length, percentage
min-height length, percentage
min-width length, percentage
opacity number
outline-color color
outline-offset integer
outline-width length
padding-bottom length
padding-left length
padding-right length
padding-top length
right length, percentage
text-indent length, percentage
text-shadow shadow
top length, percentage
vertical-align keywords, length, percentage
visibility visibility
width length, percentage
word-spacing length, percentage
z-index integer
zoom number