transition

试一试

transition: margin-right 2s;

transition: margin-right 2s 0.5s;

transition: margin-right 2s ease-in-out;

transition: margin-right 2s ease-in-out 0.5s;

transition:
  margin-right 2s,
  color 1s;

transition: all 1s ease-out;

<section id="default-example">
  <div id="example-element">Hover to see<br />the transition.</div>
</section>

#example-element {
  background-color: #e4f0f5;
  color: black;
  padding: 1rem;
  border-radius: 0.5rem;
  font: 1em monospace;
  width: 100%;
  transition: margin-right 2s;
}

#default-example:hover > #example-element {
  background-color: #990099;
  color: white;
  margin-right: 40%;
}

通过过渡，你可以定义元素两种状态之间的转变。不同的状态可以使用 伪类（如 :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>                                   ||
  <transition-behavior-value>              

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

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

<transition-behavior-value> = 
  normal          |
  allow-discrete  

<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         

示例

基本示例

在此示例中，当用户将鼠标悬停在元素上时，在发生两秒的 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