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