这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
概述
transition
是一个简写属性,可设置 transition-property
, transition-duration
, transition-timing-function
, transition-delay
。 transition用来定义元素在两种状态之间的过渡。不同状态可以用
:hover
、:active
之类的 pseudo-classes 定义,或者使用 JavaScript 动态设置。
初始值 | as each of the properties of the shorthand: |
---|---|
适用元素 | all elements, ::before and ::after pseudo-elements |
是否是继承属性 | 否 |
适用媒体 | interactive |
计算值 | as each of the properties of the shorthand:
|
是否适用于 CSS 动画 | 否 |
正规顺序 | order of appearance in the formal grammar of the values |
语法
/* Apply to 1 property */
/* property name | duration */
transition: margin-left 4s;
/* property name | duration | delay */
transition: margin-left 4s 1s;
/* property name | duration | timing function | delay */
transition: margin-left 4s ease-in-out 1s;
/* Apply to 2 properties */
transition: margin-left 4s, color 1s;
/* Apply to all changed properties */
transition: all 0.5s ease-out;
/* Global values */
transition: inherit;
transition: initial;
transition: unset;
注意:在transition
属性中,各个值的书写顺序是很重要的:第一个值是transition-duration
的时间值,第二个值是transition-delay
的时间值。
请查看“ When property value lists are of different lengths 以了解 当transition
属性的值列表长度不一样时 该如何处理。简而言之,当transition属性的值列表长度超过了transition
属性的值列表长度最大值之后,多余的值都会被忽略掉,不再进行解析(超出了实际被描绘的属性的数量 的其余过渡描述将被忽略掉。extra transition descriptions beyond the number of properties actually being animated are ignored.)。
标准语法
<single-transition>#where
<single-transition> = [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time>
where
<single-transition-property> = all | IDENT
<single-transition-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)
范例
CSS transitions 一文还有几个 CSS 过渡示例。
详述
Specification | Status | Comment |
---|---|---|
CSS Transitions transition |
Working Draft |
浏览器兼容(Browser compatibility)
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1.0 -webkit 26.0 |
4.0 (2.0) -moz 16.0 (16.0) |
10.0 | 11.6 -o 12.10 # |
3.0 -webkit |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 2.1 -webkit | 4.0 (2.0) -moz 16.0 (16.0) |
? | 10.0 -o 12.10 # |
3.2 -webkit |