CSS3 Transition 过渡

CSS3属性中有关于制作动画的三个属性：Transform,Transition,Animation；

Transition：对元素某个属性或多个属性的变化，进行控制（时间等），类似flash的补间动画。但只有两个关键贞。开始，结束。

w3school在线文档说明

http://www.w3school.com.cn/css3/css3_transition.asp

浏览器支持

div
{
transition: width 2s;
-moz-transition: width 2s;      /* Firefox 4 */
-webkit-transition: width 2s;   /* Safari 和 Chrome */
-o-transition: width 2s;        /* Opera */
}

Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。

Safari 需要前缀 -webkit-。

注释：Internet Explorer 9 以及更早的版本，不支持 transition 属性。

注释：Chrome 25 以及更早的版本，需要前缀 -webkit-。

transition 属性

下面的表格列出了所有的转换属性：

transition

transition 属性是一个简写属性，用于设置四个过渡属性：

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。

transition: property duration timing-function delay;

transition-property

transition-property 属性规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）。

提示：过渡效果通常在用户将鼠标指针浮动到元素上时发生。

注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。

transition-property: none|all|property;

div
{
transition-property:width;
-moz-transition-property: width; /* Firefox 4 */
-webkit-transition-property:width; /* Safari 和 Chrome */
-o-transition-property:width; /* Opera */
}

transition-duration

transition-duration 属性规定完成过渡效果需要花费的时间（以秒或毫秒计）。

transition-duration: time;

div
{
transition-duration: 5s;
-moz-transition-duration: 5s; /* Firefox 4 */
-webkit-transition-duration: 5s; /* Safari 和 Chrome */
-o-transition-duration: 5s; /* Opera */
}

transition-timing-function

transition-timing-function 属性规定过渡效果的速度曲线。

该属性允许过渡效果随着时间来改变其速度。

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

transition-delay

transition-delay 属性规定过渡效果何时开始。

transition-delay 值以秒或毫秒计。

transition-delay: time;