transition - CSS（层叠样式表） 编辑

transition CSS 属性是 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.

过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是 :hover，:active 或者通过 JavaScript 实现的状态变化。

语法

/* 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 属性的过渡效果，多个属性之间用逗号进行分隔。

每个单属性转换都描述了应该应用于单个属性的转换（或特殊值all和none）。 这包括：

• 零或一个值，表示转换应适用的属性。 这可能是以下任何一种：
  • 关键字none
  • 关键字all
  • 命名 CSS 属性的 <custom-ident> 。
• 零或一个 <single-transition-timing-function> 值表示要使用的过渡函数
• 零，一或两个 <time> 值。可以解析为时间的第一个值被分配给 transition-duration，并且可以解析为时间的第二个值被分配给transition-delay。

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

标准语法

<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="/wiki/zh-CN/docs/CSS/Value_definition_syntax" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>, <number <a href="/wiki/zh-CN/docs/CSS/Value_definition_syntax" 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

示例

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

规范

Specification	Status	Comment
CSS Transitions transition	Working Draft

初始值	as each of the properties of the shorthand: transition-delay: 0s transition-duration: 0s transition-property: all transition-timing-function: ease
适用元素	all elements, ::before and ::after pseudo-elements
是否是继承属性	否
计算值	as each of the properties of the shorthand: transition-delay: as specified transition-duration: as specified transition-property: as specified transition-timing-function: as specified
Animation type	discrete

浏览器兼容性

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

参见

• Using CSS transitions
• TransitionEvent