标签：transition
transition的作用可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果。过渡属性看似简单，但实际上它有很多需要注意的细节和容易混淆的地方。
| transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
| transition-duration | 规定完成过渡效果需要多少秒或毫秒。 |
| transition-timing-function | 规定速度效果的速度曲线。 |
| transition-delay | 定义过渡效果何时开始。 |
以上是transition的四个属性。
transition: property duration timing-function delay;
举一个例子：使用所有的过渡属性
div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;/* Firefox 4 */-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;/* Safari 和 Chrome */-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;/* Opera */-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}该例子可写成简写的 transition 属性：
div
{
transition: width 1s linear 2s;
-moz-transition:width 1s linear 2s; /* Firefox 4 */
-webkit-transition:width 1s linear 2s; /* Safari and Chrome */
-o-transition:width 1s linear 2s; /* Opera */
}[注意]transition的这四个子属性之间不能用逗号隔开，只能用空格隔开。因为逗号隔开的代表不同的属性(transition属性支持多值，多值部分稍后介绍)；而空格隔开的代表不同属性的四个关于过渡的子属性。
标签：transition
原文地址：http://crecent.blog.51cto.com/9031907/1898809
