Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

transition 过渡

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

概述

transition 是一个简写属性,可设置 transition-property, transition-duration, transition-timing-functiontransition-delaytransition用来定义元素在两种状态之间的过渡。不同状态可以用: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.)。

标准语法

如何阅读 CSS 语法。

<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

另见

文档标签和贡献者

 此页面的贡献者: kevinfszu, fscholz, Sebastianz, teoli, yan
 最后编辑者: kevinfszu,