動畫

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

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

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

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

什麼是主要畫面格？

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

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

閃爍的動畫狀態。

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

具有主要畫面格的閃爍動畫。

@keyframes

瀏覽器支援

• 43 分
• 12 分
• 16 分
• 9 分

資料來源

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

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

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

第一個重點是 自訂 ID (custom-ident)， 主要畫面格規則的名稱本例中的 ID 為 my-animation。 自訂 ID 的運作方式類似於函式名稱。 可讓您在 CSS 程式碼的其他位置參照主要畫面格規則。

注意： <custom-ident> 用於 CSS 中的各個位置，讓您能提供 你知道自己叫什麼名字這些 ID 區分大小寫，且 會有用的字詞例如為 CSS 行命名時 格狀檢視無法使用 span 字詞。

在主要畫面格規則中，from 和 to 是代表 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 屬性

瀏覽器支援

• 43 分
• 12 分
• 16 分
• 9 分

資料來源

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

animation-duration

瀏覽器支援

• 43 分
• 12 分
• 16 分
• 9 分

資料來源

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

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

animation-timing-function

瀏覽器支援

• 43 分
• 12 分
• 16 分
• 9 分

資料來源

如要重現動畫中的自然動態，可以使用 計算每個時間點的動畫速度計算值通常是 曲線，讓動畫在播放期間以不同速度執行 animation-duration，讓元素在瀏覽器上以反光顯示 計算的值超過 @keyframes 中定義的值。

CSS 提供數個可做為預設關鍵字的關鍵字，並用作 animation-timing-function: linear、ease、ease-in、ease-out、ease-in-out。

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

嘗試變更動畫的時間函數 使用方式。

加/減速函式的值呈現曲線，因為加/減速是以 貝氏曲線，這是一種函式類型，用於模擬速率。每次放送 函式關鍵字 (例如 ease) 參照預先定義的貝茲曲線。在 CSS 中 您可以直接使用 cubic-bezier() 函式定義貝茲曲線。 可接受四個數字值：x1、y1、x2、y2。

.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

瀏覽器支援

• 43 分
• 12 分
• 16 分
• 9 分

資料來源

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

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

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

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

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

animation-direction

瀏覽器支援

• 43 分
• 12 分
• 16 分
• 9 分

資料來源

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

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

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

嘗試變更動畫方向。

animation-delay

瀏覽器支援

• 43 分
• 12 分
• 16 分
• 9 分

資料來源

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

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

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

嘗試變更動畫延遲。

animation-play-state

瀏覽器支援

• 43 分
• 12 分
• 16 分
• 9 分

資料來源

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

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

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

animation-fill-mode

瀏覽器支援

• 43 分
• 12 分
• 16 分
• 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 個動畫使用相同名稱，但允許 SWOOP 和 swoop 並用。

關鍵字 from 和 to 與：

start，end。

請再試一次！

0%，100%。

from 與 0% 相同，to 與 100% 相同。

0和1

請再試一次！

animation-timing-function 通常也稱為：

動態時間

請再試一次！

延遲

請再試一次！

Easing

🎉

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

1

瀏覽器會將元素目前的狀態當做主要畫面格，因此至少需要 1 個主要畫面格。

2

請再試一次！

3

請再試一次！

4

請再試一次！