動畫

有時您會在介面上看到小幫手,點選後即可取得該部分的實用資訊。這些資訊通常會搭配脈動動畫,讓您知道資訊已顯示,並且應與之互動。本單元將說明如何使用 CSS 建立這些輔助程式和其他動畫。

您可以使用 CSS 設定含有主要畫面格的動畫序列。這些序列可以是基本單狀態動畫,或是複雜的時間序列。

什麼是主要畫面格?

在大多數動畫工具中,主要畫面格是用來將動畫狀態指派至時間軸上時間戳記的機制。

舉例來說,以下是脈動「輔助」點的時序。動畫會執行 1 秒,並且有 2 個狀態。

脈衝動畫在 1 秒時間範圍內的狀態

每個動畫狀態都有特定的開始和結束點。您可以使用主要畫面格,在時間軸上對應這些項目。

與前述相同的圖表,但這次包含了關鍵影格

@keyframes

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

CSS @keyframes 的概念與動畫主要影格相同。

以下是包含兩個狀態的範例:

@keyframes my-animation {
  from {
    transform: translateY(20px);
  }
  to {
    transform: translateY(0px);
  }
}

第一個重要的部分是 自訂 ID (custom-ident),也就是 keyframes 規則的名稱。本範例中的 ID 為 my-animation。自訂 ID 的運作方式類似於函式名稱,可讓您在 CSS 程式碼的其他位置參照關鍵影格規則。

在主要畫面格規則中,fromto 是代表 0%100% 的關鍵字,分別代表動畫的起始和結束點。您可以重新建立相同的規則,如下所示:

@keyframes my-animation {
    0% {
        transform: translateY(20px);
    }
    100% {
        transform: translateY(0px);
    }
}

您可以在指定時間範圍內新增任意數量的資料點。在脈動輔助程式範例中,有兩個狀態會轉譯為兩個關鍵影格。也就是說,您在主要影格規則中會設有兩個位置,用來代表每個主要影格的變更。

@keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.4;
  }
}

animation 屬性

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

如要在 CSS 規則中使用 @keyframes,您可以個別定義各種動畫屬性,也可以使用 animation 簡寫屬性。

animation-duration

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

.my-element {
    animation-duration: 10s;
}

「animation-duration」 屬性定義 @keyframes 時間軸應以時間值的形式持續多久。預設值為 0 秒,表示動畫仍會執行,但速度太快,您無法看見。時間值不得為負值。

animation-timing-function

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

為在動畫中重現自然的動作,您可以使用計時函式,計算動畫在各個點的速度。計算值通常會彎曲,讓動畫在 animation-duration 期間以變化速度執行,並在瀏覽器計算的值超出 @keyframes 中定義的值時,讓元素顯示為彈跳。

CSS 中提供多個可用做預設值的關鍵字,可用於 animation-timing-function 的值:lineareaseease-inease-outease-in-out

.my-element {
    animation-timing-function: ease-in-out;
}

淡出函式值會顯示為曲線,這是因為淡出效果是使用 貝茲曲線 (一種用於模擬速度的函式) 計算而得。每個時間函式關鍵字 (例如 ease) 都會參照預先定義的貝茲曲線。在 CSS 中,您可以直接使用 cubic-bezier() 函式定義貝茲曲線,該函式可接受四個數值:x1y1x2y2

.my-element {
    animation-timing-function: cubic-bezier(.42, 0, .58, 1);
}

這些值會沿著 X 軸和 Y 軸繪製曲線的各個部分。

進度與時間圖表上的貝茲曲線

瞭解貝茲曲線相當複雜,視覺化工具 (例如 Lea Verou 的這個產生器) 非常實用。

steps 緩和函式

有時您可能會想以更精細的方式控制動畫,以間隔移動而非沿著曲線移動。steps() 緩和函式可讓您將時間軸分割成相等時間長度的定義間隔。

.my-element {
    animation-timing-function: steps(10, end);
}

第一個引數是步驟數。如果主影格數量與步驟數量相同,則每個主影格會依序播放其步驟的確切時間長度,且不會在狀態之間進行轉場。如果主要畫面格少於步驟,瀏覽器會根據第二個引數,在主要畫面格之間新增步驟。

第二個引數是方向。如果設為預設值 end,步驟會在時間軸結束時完成。如果設為 start,動畫的第一個步驟會在動畫開始時立即完成,也就是比 end 提早結束一個步驟。

animation-iteration-count

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

.my-element {
    animation-iteration-count: 10;
}

animation-iteration-count 屬性定義動畫期間 @keyframes 時間軸應執行的次數。根據預設,這個值為 1,表示動畫會在時間軸結束時停止。此值不得為負數。

如要讓動畫循環播放,請將疊代次數設為 infinite。這就是本課程一開始的脈動動畫運作方式。

animation-direction

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

.my-element {
    animation-direction: reverse;
}

您可以使用 animation-direction 設定時間軸在主要影格間執行的方向,可用的值如下:

  • normal:預設值,即前進。
  • reverse:在時間軸上向後執行。
  • alternate:對於每個動畫疊代,時間軸會交替執行前進和倒轉。
  • alternate-reverse:類似 alternate,但動畫會從時間軸倒轉開始。

animation-delay

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

.my-element {
    animation-delay: 5s;
}

animation-delay 屬性定義瀏覽器在開始播放動畫前等待的時間長度。與 animation-duration 屬性一樣,這個屬性也接受時間值。

animation-duration 不同,您可以animation-delay 定義為負值,讓動畫在時間軸的對應時間點開始播放。舉例來說,如果動畫長度為 10 秒,而您將 animation-delay 設為 -5s,動畫就會從時間軸中間開始播放。

animation-play-state

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

.my-element:hover {
    animation-play-state: paused;
}

animation-play-state 屬性可讓您播放及暫停動畫。預設值為 running。如果設為 paused,動畫就會暫停。

animation-fill-mode

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

animation-fill-mode 屬性會定義 @keyframes 時間軸中哪些值會在動畫開始前或結束後保留。預設值為 none,表示動畫完成後,時間軸中的值會遭到捨棄。您也可以採取以下做法:

  • forwards:系統會根據動畫方向保留最後一個主要畫面格。
  • backwards:第一個主要畫面格會根據動畫方向持續存在。
  • both:第一個和最後一個關鍵影格都會保留。

animation 速記法

您可以使用 animation 速記法定義屬性,而非個別定義每個屬性,這樣一來,您就能按照以下順序定義動畫屬性:

  1. animation-name
  2. animation-duration
  3. animation-timing-function
  4. animation-delay
  5. animation-iteration-count
  6. animation-direction
  7. animation-fill-mode
  8. animation-play-state
.my-element {
    animation: my-animation 10s ease-in-out 1s infinite forwards forwards running;
}

使用動畫時的注意事項

使用者可以設定作業系統,在與應用程式和網站互動時偏好減少動畫。您可以使用 prefers-reduced-motion 媒體查詢來偵測這項偏好設定:

@media (prefers-reduced-motion) {
  .my-autoplaying-animation {
    animation-play-state: paused;
  }
}

這不一定是無動畫的偏好設定。建議減少動畫,尤其是減少非預期的動畫。如要進一步瞭解這項偏好設定和整體效能,請參閱動畫指南

進行隨堂測驗

測驗您對動畫的瞭解

@keyframes 動畫的名稱或自訂 ID是否有大小寫之分?

關鍵字 fromto 與以下關鍵字相同:

startend
0%100%
01

animation-timing-function 也常被稱為:

Easing
延遲
動態時間

@keyframes 動畫中的主要畫面格數量下限為何?

2
3
4
1