transition

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

* Some parts of this feature may have varying levels of support.

尝试一下

过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换,像是 :hover:active 或者通过 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属性可以被指定为一个或多个 CSS 属性的过渡效果,多个属性之间用逗号进行分隔。

每个单属性转换都描述了应该应用于单个属性的转换(或特殊值allnone)。这包括:

请查看“如何处理”以了解当transition属性的值个数超过可以接收的值的个数时该如何处理。简而言之,当transition属性的值个数超过可以接收的值的个数时,多余的值都会被忽略掉,不再进行解析。

标准语法

transition = 
<single-transition>#

<single-transition> =
[ none | <single-transition-property> ] ||
<time> ||
<easing-function> ||
<time>

<single-transition-property> =
all |
<custom-ident>

<easing-function> =
<linear-easing-function> |
<cubic-bezier-easing-function> |
<step-easing-function>

<linear-easing-function> =
linear |
<linear()>

<cubic-bezier-easing-function> =
ease |
ease-in |
ease-out |
ease-in-out |
<cubic-bezier()>

<step-easing-function> =
step-start |
step-end |
<steps()>

<linear()> =
linear( [ <number> && <percentage>{0,2} ]# )

<cubic-bezier()> =
cubic-bezier( [ <number [0,1]> , <number> ]#{2} )

<steps()> =
steps( <integer> , <step-position>? )

<step-position> =
jump-start |
jump-end |
jump-none |
jump-both |
start |
end

示例

使用 CSS 过渡”一文中还包含了几个 CSS 过渡示例。

规范

Specification
CSS Transitions
# transition-shorthand-property
初始值该简写所对应的每个属性:
适用元素all elements, ::before and ::after pseudo-elements
是否是继承属性
计算值该简写所对应的每个属性:
动画类型Not animatable

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
transition
Gradients can be animated
transition-behavior value

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

参见