Css之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。

• 浅绿 = 支持
• 红色 = 不支持
• 粉色 = 部分支持