transition

过渡使您能够定义元素两个状态之间的过渡。可以使用 伪类（如 :hover 或 :active）定义不同的状态，或者使用 JavaScript 动态设置。

此属性是以下 CSS 属性的简写

• transition-behavior
• transition-delay
• transition-duration
• transition-property
• transition-timing-function

/* Apply to 1 property */
/* property name | duration */
transition: margin-right 4s;

/* property name | duration | delay */
transition: margin-right 4s 1s;

/* property name | duration | easing function */
transition: margin-right 4s ease-in-out;

/* property name | duration | easing function | delay */
transition: margin-right 4s ease-in-out 1s;

/* property name | duration | behavior */
transition: display 4s allow-discrete;

/* Apply to 2 properties */
transition:
  margin-right 4s,
  color 1s;

/* Apply to all changed properties */
transition: all 0.5s ease-out allow-discrete;
transition: 200ms linear 50ms;

/* Global values */
transition: inherit;
transition: initial;
transition: revert;
transition: revert-layer;
transition: unset;

transition 属性值指定为以下之一

• 特殊值 none，它指定此元素上不会发生任何过渡。这是默认值。
• 一个或多个单属性过渡，用逗号分隔。

每个单属性过渡描述应用于单个属性或所有属性的过渡。它包括

• 零个或一个值，表示应用过渡的属性或属性。这可以设置为
  • 表示单个属性的 <custom-ident>。
  • 特殊值 all，它指定过渡将应用于元素状态更改时发生更改的所有属性。
  • 无值，在这种情况下，将推断值为 all，并且指定的过渡仍将应用于所有更改的属性。
• 零个或一个 <easing-function> 值，表示要使用的缓动函数
• 零个、一个或两个 <time> 值。可以解析为时间的第一值分配给 transition-duration，可以解析为时间的第二值分配给 transition-delay。
• 零个或一个值，声明是否为动画行为为 离散 的属性启动过渡。如果存在，该值是关键字 allow-discrete 或关键字 normal。

如果您将 all 指定为一个单属性过渡的过渡属性，但随后使用 <custom-ident> 值指定后续的单属性过渡，则这些后续过渡将覆盖第一个过渡。例如

transition:
  all 200ms,
  opacity 400ms;

在这种情况下，元素状态更改时发生更改的所有属性都将以 200ms 的持续时间过渡，除了 opacity，它将花费 400ms 进行过渡。

请参阅 属性值列表长度不同的处理方式。简而言之，超出实际正在动画处理的属性数量的额外过渡描述将被忽略。

transition = 
  <single-transition>#  

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

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

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

<linear-easing-function> = 
  linear( <linear-stop-list> )  

<cubic-bezier-easing-function> = 
  ease                                                |
  ease-in                                             |
  ease-out                                            |
  ease-in-out                                         |
  cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )  

<step-easing-function> = 
  step-start                             |
  step-end                               |
  steps( <integer> , <step-position>? )  

<linear-stop-list> = 
  [ <linear-stop> ]#  

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

<linear-stop> = 
  <number>               &&
  <linear-stop-length>?  

<linear-stop-length> = 
  <percentage>{1,2}  

在此示例中，当用户将鼠标悬停在元素上时，在 background-color 过渡发生之前会有半秒（500ms）的延迟。

HTML

<a class="target">Hover over me</a>

CSS

我们包含两个 <time> 值。在 transition 简写中，第一个 <time> 值是 transition-duration。第二个时间值是 transition-delay。如果省略，两者都默认为 0s。

.target {
  font-size: 2rem;
  background-color: palegoldenrod;
  transition: background-color 2s 500ms;
}

.target:hover {
  background-color: darkorange;
}

• CSS 过渡 模块
• 使用 CSS 过渡
• TransitionEvent