動畫很適合用來突顯互動元素，並在設計中加入有趣和有趣的元素。本單元將說明如何使用 CSS 新增及控制動畫效果。
有時您可能會看到介面上的輔助工具，而當您點選後，就能提供該特定區段的實用資訊。這些動畫通常會播放閃爍的動畫，以巧妙地讓您知道該資訊在該處，應該與內容互動。但該如何與 CSS 搭配運作？
在 CSS 中，您可以使用 CSS 動畫製作這種類型的動畫，即可使用主要畫面格設定動畫序列。動畫可以是簡單的、一個狀態動畫，甚至是複雜的時間序列。
什麼是主要畫面格？
在動畫軟體、CSS 和其他可用來為內容建立動畫的工具中，主要畫面格是用來為時間軸指派動畫狀態的機制。
現在，我們使用「pulser」做為情境。整個動畫播放 1 秒，且執行超過 2 個狀態。
每個動畫狀態的開始和結束時間都有特定點。您要在時間軸上利用主要畫面格對應這些元素。
@keyframes
現在您已瞭解主要畫面格，知識應可協助您瞭解 CSS @keyframes 規則的運作方式。以下為包含兩個狀態的基本規則：
@keyframes my-animation {
from {
transform: translateY(20px);
}
to {
transform: translateY(0px);
}
}
要注意的第一個部分是自訂事件 (自訂 ID)，更換成人詞時，主要畫面格規則的名稱。這項規則的 ID 為 my-animation。自訂 ID 的運作方式與函式名稱類似。如您在函式模組中所學，可讓您參照 CSS 程式碼的其他位置，參照主要畫面格規則。
在主要畫面格規則中，from 和 to 是代表 0% 和 100% 的關鍵字，也就是動畫的開頭和結尾。您可以重建相同的規則，如下所示：
@keyframes my-animation {
0% {
transform: translateY(20px);
}
100% {
transform: translateY(0px);
}
}
您可以在時間範圍內新增多個位置，數量不限。 以「pulser」範例的內容來說，有 2 種狀態會轉譯為 2 個主要畫面格。也就是說，主要畫面格規則中有 2 個位置，分別代表這些主要畫面格的變更情形。
@keyframes pulse {
0% {
opacity: 0;
}
50% {
transform: scale(1.4);
opacity: 0.4;
}
}
animation 屬性
如要在 CSS 規則中使用 @keyframes，請定義各種動畫屬性，「或者」使用 animation 簡短屬性。
animation-duration
.my-element {
animation-duration: 10s;
}
animation-duration 屬性可定義 @keyframes 時間軸的播放時間長度。應為時間值。預設值為 0 秒，表示動畫仍會執行，但顯示速度就會過快。您無法新增負值時間值。
animation-timing-function
為了協助重新建立動畫中的自然動作，您可以使用時間函式計算每個時間點的動畫速度。計算的值通常為「曲線」，使動畫在 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 軸表示曲線的每個部分。
瞭解貝茲曲線是複雜且視覺化的工具，例如 Lea Verou 的這個產生器都很有幫助。
steps 加/減速功能
有時候，您可能想更精細的動畫控制，而非沿著曲線移動，而是希望以間隔移動。steps() 加/減速函式可讓您將時間軸細分為已定義的「相等間隔」。
.my-element {
animation-timing-function: steps(10, end);
}
第一個引數是步數，如果步驟定義為 10 且有 10 個主要畫面格，則每個主要畫面格都會以確切時間依序播放，且沒有狀態之間的轉換。如果步驟的主要畫面格不足，系統會根據第二個引數新增主要畫面格之間的步驟。
第二個引數是方向。如果設為 end (預設值)，則步驟會在時間軸結束時完成。如果設為 start，動畫的第一個步驟會在開始時立即執行，也就是說，它會在 end 之前結束一個步驟。
animation-iteration-count
.my-element {
animation-iteration-count: 10;
}
animation-iteration-count 屬性會定義 @keyframes 時間軸應執行的次數。預設為 1，表示動畫結束時，動畫會在時間軸結束時停止。數字不得為負數。
您可以使用 infinite 關鍵字來循環播放動畫，這就是本課程一開始的「閃爍」示範方式。
animation-direction
.my-element {
animation-direction: reverse;
}
您可以使用 animation-direction 設定時間軸在主要畫面格上執行的方向：
normal：預設值，朝前。reverse：在時間軸上向後執行。alternate：每次動畫疊代時，時間軸將依序向前或向後執行。alternate-reverse：alternate的反向。
animation-delay
.my-element {
animation-delay: 5s;
}
animation-delay 屬性可定義開始播放動畫前的等待時間長度。如同 animation-duration 屬性，這個屬性可接受時間值。
與 animation-duration 屬性不同，您「可以」將這個屬性定義為負值。如果設定負值，@keyframes 中的時間軸會從該時間點開始。舉例來說，如果您的動畫長度為 10 秒，而您將 animation-delay 設為 -5s，則動畫會從時間軸的一半開始。
animation-play-state
.my-element:hover {
animation-play-state: paused;
}
animation-play-state 屬性可讓您播放及暫停動畫。預設值為 running，如果設為 paused，系統就會暫停動畫。
animation-fill-mode
animation-fill-mode 屬性會定義在動畫開始之前或結束之後，@keyframes 時間軸中的哪些值。預設值為 none，表示動畫結束時，系統會捨棄時間軸中的值。但您也可以選用其他格式，包括：
forwards：根據動畫方向，系統會保留最後一個主要畫面格。backwards：系統會根據動畫方向保留第一個主要畫面格。both：遵循forwards和backwards的規則。
animation 簡寫
您可以在 animation 中簡要定義所有屬性，並依照以下順序定義動畫屬性，無須單獨定義：
animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-modeanimation-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 會區分大小寫？
SWOOP 和 swoop 可以共存。關鍵字 from 和 to 與
start，end。0%，100%。from 與 0% 相同，而 to 與 100% 相同。0和1animation-timing-function 通常也稱為
@keyframes 動畫中最少需要幾個主要畫面格？