transition
CSS
特性为
shorthand property
for
transition-property
,
transition-duration
,
transition-timing-function
，和
transition-delay
.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Transitions enable you to define the transition between two states of an element. Different states may be defined using
pseudo-classes
like
:hover
or
:active
or dynamically set using JavaScript.
此特性是下列 CSS 特性的简写：
/* Apply to 1 property */ /* property name | duration */ transition: margin-right 4s; /* property name | duration | delay */ transition: margin-right 4s 1s; /* property name | duration | timing function */ transition: margin-right 4s ease-in-out; /* property name | duration | timing function | delay */ transition: margin-right 4s ease-in-out 1s; /* Apply to 2 properties */ transition: margin-right 4s, color 1s; /* Apply to all changed properties */ transition: all 0.5s ease-out; /* Global values */ transition: inherit; transition: initial; transition: unset;
transition
property is specified as one or more single-property transitions, separated by commas.
Each single-property transition describes the transition that should be applied to a single property (or the special values
all
and
none
). It includes:
none
all
<custom-ident>
naming a CSS property.
<single-transition-timing-function>
value representing the timing function to use
<time>
values. The first value that can be parsed as a time is assigned to the
transition-duration
, and the second value that can be parsed as a time is assigned to
transition-delay
.
见 how things are handled when lists of property values aren't the same length. In short, extra transition descriptions beyond the number of properties actually being animated are ignored.
| 初始值 |
as each of the properties of the shorthand:
|
|---|---|
| 适用于 |
所有元素，
::before
and
::after
pseudo-elements
|
| 继承 | no |
| 计算值 |
as each of the properties of the shorthand:
|
| 动画类型 | discrete |
<single-transition>#where
<single-transition> = [ none | <single-transition-property> ] || <time> || <timing-function> || <time>where
<single-transition-property> = all | <custom-ident>
<timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>where
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number <a href="/en-US/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>, <number <a href="/en-US/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)where
<step-position> = jump-start | jump-end | jump-none | jump-both | start | end
This example performs a four-second font size transition with a one-second delay when the user hovers over the element.
<a class="target">Hover over me</a>
.target {
font-size: 14px;
transition: font-size 4s 1s;
}
.target:hover {
font-size: 36px;
}
There are several more examples of CSS transitions included in the Using CSS transitions article.
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Transitions
The definition of 'transition' in that specification. |
工作草案 | 初始定义 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
transition
|
Chrome 完整支持 26 | Edge 完整支持 12 |
Firefox
完整支持
16
注意事项
|
IE
完整支持
10
|
Opera
完整支持
12.1
|
Safari 完整支持 9 | WebView Android 完整支持 ≤37 | Chrome Android 完整支持 26 |
Firefox Android
完整支持
16
注意事项
|
Opera Android
完整支持
12.1
|
Safari iOS 完整支持 9 | Samsung Internet Android 完整支持 1.5 |
| Gradients | Chrome 不支持 No | Edge 不支持 12 — 79 | Firefox 不支持 No | IE 完整支持 10 | Opera 不支持 No | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 不支持 No | Firefox Android 不支持 No | Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 不支持 No |
完整支持
不支持
见实现注意事项。
用户必须明确启用此特征。
要求使用供应商前缀或不同名称。