transition

语法：

transition：<single-transition>[,<single-transition>]*

<single-transition> = [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time>

默认值：看每个独立属性

适用于：所有元素，包含伪对象:after和:before

继承性：无

动画性：否

计算值：看每个独立属性

媒体：交互

取值：

<' transition-property '>：
检索或设置对象中的参与过渡的属性
<' transition-duration '>：
检索或设置对象过渡的持续时间
<' transition-timing-function '>：
检索或设置对象中过渡的动画类型
<' transition-delay '>：
检索或设置对象延迟过渡的时间

说明：

复合属性。检索或设置对象变换时的过渡。
  • 注意：如果只提供一个<time>参数，则为 <' transition-duration '> 的值定义；如果提供二个<time>参数，则第一个为 <' transition-duration '> 的值定义，第二个为 <' transition-delay '> 的值定义
  • 可以为同一元素的多个属性定义过渡效果。示例：

    缩写方式：

    transition: border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s;

    拆分方式：

    transition-property: border-color, background-color, color; transition-duration: .5s, .5s, .5s; transition-timing-function: ease-in, ease-in, ease-in; transition-delay: .1s, .1s, .1s;
  • 如果定义了多个过渡的属性，而其他属性只有一个参数值，则表明所有需要过渡的属性都应用同一个参数值。据此可以对上面的例子进行缩写：

    拆分方式：

    transition-property: border-color, background-color, color; transition-duration: .5s; transition-timing-function: ease-in; transition-delay: .1s;
  • 如果需要定义多个过渡属性且不想指定具体是哪些属性过渡，同时其他属性只有一个参数值，据此可以对上面的例子进行缩写：

    缩写方式：

    transition: all .5s ease-in .1s;

    拆分方式：

    transition-property:all; transition-duration: .5s; transition-timing-function: ease-in; transition-delay: .1s;
  • 对应的脚本特性为transition。

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE Edge Firefox Chrome Safari Opera iOS
Safari		 Android
Browser		 Blackberry
Browser		 Opera
Mobile		 Chrome
for
Android		 Firefox
for
Android		 IE
Mobile		 UC
Browser
for
Android		 Samsung
Internet		 QQ
Browser		 Baidu
Browser
5.5-9 12+ 2-3.6 4-25 -webkit- 3.1-5 -webkit- #1 9-10.1 3.2-5.1 -webkit- #1 2.1-4.3 -webkit- 7 -webkit- 10-11.5 -o- #1 61 56 10+ 11.4 4+ 1.2 7.12
10+ 4 -moz- #1 26+ 5.1-6 -webkit- 10.5-11.6 -o- #1 6.0-6.1 -webkit- 4.4+ 10 12 -o-
5-15 -moz- 6.1+ 12 -o- 7.0+ 12.1+
16+ 12.1+
  1. 通过selectivizr，可以免去css3前缀。本页下方的示例已使用此方案。

示例：