©
This document usesPHP Chinese website manualRelease
transition：
默认值：看每个独立属性
适用于：所有元素，包含伪对象:after和:before
继承性：无
动画性：否
计算值：看每个独立属性
媒体：交互
<' transition-property '>：检索或设置对象中的参与过渡的属性
<' transition-duration '>：检索或设置对象过渡的持续时间
<' transition-timing-function '>：检索或设置对象中过渡的动画类型
<' 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。
| Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
|---|---|---|---|---|---|---|---|---|
| Basic Support | 6.0-9.0 | 2.0-3.6 | 4.0-25.0-webkit- | 6.0-webkit- | 15.0+ | 6.0-6.1-webkit- | 2.1-4.3-webkit- | 18.0-24.0-webkit- |
| 10.0+ | 4.0-15.0-moz- | 26.0+ | 6.1+ | 7.0+ | 4.4.4+ | 25.0+ | ||
| 16.0+ |
transition_CSS参考手册_web前端开发参考手册系列 请将鼠标移动到下面的矩形上：
点击 "运行实例" 按钮查看在线实例