CSS3笔记——过渡 Transition

过渡 Transition

• 允许CSS属性值在一定的时间区内平滑地过渡，

• 在鼠标单击、获得焦点、被点击或对元素做任何改变中触发，并圆滑地以动画效果改变CSS属性值。

兼容性 :

IE10+、FireFox16+、Chrome26+、Safari6.1+、Opera12.1+

transition-property

语法：

transition-property: none | all |property

参数说明

• none 没有属性改变
• all 所有属性改变 （默认）
• property（元素属性名）

实例：

颜色：transition-property: color

div {background-color: red;
            -webkit-transition-property: background-color;
               -moz-transition-property: background-color;
                -ms-transition-property: background-color;
                 -o-transition-property: background-color;
                    transition-property: background-color;
}

div:hover { background-color: blue;               
            -webkit-transition-property: background-color;
               -moz-transition-property: background-color;
                -ms-transition-property: background-color;
                 -o-transition-property: background-color;
                    transition-property: background-color;
}

transition-duration

检索或设置对象过度的持续时间

语法：

transition-duration: time;

单位：

• s（秒）
• ms（毫秒）

transition-timing-function

检索或设置过渡动画类型。
语法：

transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out

参数说明：

• linear：线性过渡 匀速运动，突然停下

• ease ：平滑过渡 慢-快-快（速度增加少）

• ease-in： 由慢到快，然后突然就停下来了

• ease-out：由快到慢，然后平稳地停下来

• ease-in-out：慢-快-慢

transition-delay

检索或设置延迟过渡时间。

语法：

transition-delay: time;

单位：

• s（秒）
• ms（毫秒）

transition整合

语法：

transition: property duration timing-function delay ;

实例：

-webkit-transition: color 2s ease-in-out 1s;
   -moz-transition: color 2s ease-in-out 1s;
    -ms-transition: color 2s ease-in-out 1s;
     -o-transition: color 2s ease-in-out 1s;
        transition: color 2s ease-in-out 1s;