CSS3过渡

(1) 、它是如何工作？

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：

1、指定要添加效果的CSS属性

2、指定效果的持续时间。

div { 

transition: width 2s; -webkit-transition: width 2s; /* Safari */ }

如果未指定的期限，transition将没有任何效果，因为默认值是0。

指定的CSS属性的值更改时效果会发生变化。一个典型CSS属性的变化是用户鼠标放在一个元素上时：

div:hover { width:300px; }

要添加多个样式的变换效果，添加的属性由逗号分隔：

            
　　　　　　　/*所有的*/
　　　　　　　/* transition-property: all; */
            /* 延迟事件 */
            /* transition-delay: 2s; */
            /* 动画完成时间 */
            /* transition-duration: 4s; */
            /* 赛贝尔曲线 */
            /* transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); */
            /* 默认是easy   匀速是linera   easy-in easy-out easy-in-out */
            /* transition-timing-function: linear; */

(2) 、过渡属性

下表列出了所有的过渡属性:

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。	3
transition-delay	规定过渡效果何时开始。默认是 0。	3