CSS3 transition属性介绍

CSS3 transition过度：从元素的一种样式在指定的时间内过度称另外一种样式

语法：transition: property duration timing-function delay;（简写）

 

1. transition-property：规定设置过度效果的CSS属性的名称；

2. transition-duration：规定完成过渡效果需要多少秒或毫秒；

3. transition-timing-function：规定速度效果的速度曲线；

4. transition-delay：定义过渡效果何何时开始

浏览器兼容性：

• FireFox拓展前缀：-moz-CSS3属性：值

• Chrome和Safari拓展前缀：-webkit-CSS3属性：值

• Opera拓展前缀：-o-CSS3属性：值

• IE9 以及更早版本不支持transition属性

transition-property：用来定义转换动画的CSS属性名称

 

• none：没有属性会获得过渡效果（默认值）

• all：所有属性都将获得过渡效果

• property：定义应用过渡效果的CSS属性名称列表，用逗号隔开。

注意：必须指定transition-duration属性，否则时长为0，不会产生效果。

transition-duration：规定完成过度效果要花费的时间（以秒或毫秒计）

• time：默认值为0，不会产生任何效果，必须指定一个值

transition-timing-function：定义过度动画的效果

• linear：以相同速度开始至结束的过渡效果

• ease：慢速开始，然后变快，然后慢速结束的过渡效果

• ease-in：慢速开始的过度效果

• ease-out：慢速结束的过渡效果

• ease-in-out：慢速开始和结束的过渡效果

• cubic-bezier：在cubic-bezier函数中定义自己的值。可能的值是0-1之间

rtransition-delay：定义过度动画的延迟时间（多少秒后开始），以秒或毫秒为单位

 

• time：默认值为0，不会产生任何效果，非必须指定一个值