動畫

動畫是凸顯互動式元素並增添興趣的好方法 以及增添設計趣味性和趣味在本單元中,您可以瞭解如何新增及控制 CSS 動畫效果

有時候介面上會顯示一些實用的輔助工具 查看相關資訊這類通常 閃爍的動畫,巧妙地告知資訊已經存在 應進行互動 本單元將說明如何使用 例如 CSS、CSS、CSS 和 JS。

閃爍圖示是確保使用者 注意重要資訊

您可以使用 CSS 搭配主要畫面格設定動畫序列。這些序列 可以是基本的一狀態動畫,也可以是複雜時間的序列。

什麼是主要畫面格?

在大多數的動畫工具中,您可以使用主要畫面格來指派動畫 將狀態更新為時間戳記

比方說,提供脈衝「輔助」的時間軸點。動畫播放時 有 2 個狀態

閃爍動畫在 1 秒時間範圍內的狀態
閃爍的動畫狀態。

每個動畫狀態都有特定開始和結束的時間點。 方法是在時間軸上透過主要畫面格對應這些元素。

與先前相同的圖表,但這次包含主要畫面格
具有主要畫面格的閃爍動畫。

@keyframes

瀏覽器支援

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

資料來源

CSS @keyframes 採用與動畫主要畫面格相同的概念。

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

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

第一個重點是 自訂 ID (custom-ident), 主要畫面格規則的名稱本例中的 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;
  }
}
請嘗試編輯 pulse 規則,看看動畫如何 異動

animation 屬性

瀏覽器支援

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

資料來源

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

animation-duration

瀏覽器支援

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

資料來源

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

animation-duration 屬性會定義 @keyframes 時間軸應為時間值的時間長度。 預設值為 0 秒,表示動畫仍會顯示,但也會 應該很快就會發現時間值不可使用負數。

animation-timing-function

瀏覽器支援

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

資料來源

如要重現動畫中的自然動態,可以使用 計算每個時間點的動畫速度計算值通常是 曲線,讓動畫在播放期間以不同速度執行 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 軸繪製曲線的每個部分。

進度與時序圖上的貝茲曲線
貝茲曲線範例。

瞭解貝茲曲線的功臣很複雜。視覺工具,例如

steps 加/減速函式

有時候,您可能會想以更精細的方式控制動畫 而不是沿著曲線移動steps() 加/減速功能可讓您 可將時間軸拆分為「相同時間長度」定義的間隔時間。

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

第一個引數是數字的步數。如果沒有任何獨立的 Pod 數量 主要畫面格視為步驟,每個主要畫面格都會依照 其步,而且狀態之間不會轉換 如果主要畫面格少於步數,瀏覽器會在 視第二個引數而定。

第二個引數為方向。如果設為 end, 預設會在時間軸結束時完成這些步驟如果設為 start, 動畫的第一個步驟會在動畫開始時立即完成 結束在「end」之前一個步驟。

比較不同步驟的動畫。

animation-iteration-count

瀏覽器支援

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

資料來源

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

animation-iteration-count 屬性會定義 @keyframes 時間軸在 預設值為 1,表示動畫在播放時停止 到達時間軸的時間點這個值不得為負數。

請嘗試變更此動畫的疊代次數。

如要循環播放動畫,請將疊代次數設為 infinite。這是 一堂課一開始就有閃爍的動畫

閃爍的動畫會無限循環播放。

animation-direction

瀏覽器支援

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

資料來源

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

你可以透過下列方式設定時間軸在主要畫面格上移動的方向: animation-direction, 該呼叫會採用下列值:

  • normal:預設值。
  • reverse:在你的時間軸上反向執行。
  • alternate:在每次動畫疊代時,時間軸會在 再執行一次
  • alternate-reverse:類似 alternate,但動畫開頭是 返回時間軸
嘗試變更動畫方向。

animation-delay

瀏覽器支援

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

資料來源

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

動畫延遲 屬性會定義瀏覽器開始播放動畫之前等待的時間長度。 和 animation-duration 屬性一樣,都需要時間值。

animation-duration 不同,您「可以」animation-delay 定義為負數 值,讓動畫從 時間軸上。舉例來說,如果您的動畫長度為 10 秒 animation-delay-5s,動畫會從一半開始的一半時間開始, 時間軸上。

嘗試變更動畫延遲。

animation-play-state

瀏覽器支援

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

資料來源

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

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

將滑鼠遊標移到動畫元素上, 暫停播放動畫

animation-fill-mode

瀏覽器支援

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

資料來源

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 是否區分大小寫?

🎉
CSS 不允許 2 個動畫使用相同名稱,但允許 SWOOPswoop 並用。

關鍵字 fromto 與:

startend
請再試一次!
0%100%
from0% 相同,to 與 100% 相同。
01
請再試一次!

animation-timing-function 通常也稱為:

動態時間
請再試一次!
延遲
請再試一次!
Easing
🎉

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

1
瀏覽器會將元素目前的狀態當做主要畫面格,因此至少需要 1 個主要畫面格。
2
請再試一次!
3
請再試一次!
4
請再試一次!