動畫是突顯互動元素的絕佳方式，還能為您的設計增添興趣和樂趣。在本單元中，您將瞭解如何透過 CSS 新增及控制動畫效果。
有時候，您會在介面中看到小輔助程式，因為當您點選這些輔助程式時，它會提供有關目前所在部分的實用資訊。這些通知通常會有閃爍的動畫，目的是讓您知道資訊存在且應與之互動。本單元將說明如何使用 CSS 建立這些輔助程式和其他動畫。
您可以使用 CSS 設定含有主要畫面格的動畫序列。這些序列可以是基本的單狀態動畫，也可以是複雜的、時間型序列。
什麼是主要畫面格？
在大部分的動畫工具中，主要畫面格是用來將動畫狀態指派給時間軸時間戳記的機制。
舉例來說，以下是閃爍「helper」點的時間軸。動畫執行 1 秒，且有 2 個狀態。
這些動畫各都有一個特定時間點的開始和結束位置。請使用主要畫面格，將這些內容對應至時間軸。
@keyframes
CSS @keyframes 採用與動畫主要畫面格相同的概念。
以下舉例說明兩個狀態：
@keyframes my-animation {
from {
transform: translateY(20px);
}
to {
transform: translateY(0px);
}
}
第一個重要部分是自訂 ID (custom-ident)，也就是主要畫面格規則的名稱。本範例的 ID 為 my-animation。自訂 ID 的運作方式與函式名稱類似，可讓您在 CSS 程式碼的其他位置參照主要畫面格規則。
在主要畫面格規則中，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 屬性
如要在 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) 都會參照預先定義的 Bézier 曲線。在 CSS 中，您可以使用 cubic-bezier() 函式直接定義 Bézier 曲線，且該函式可接受四個數值：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);
}
第一個引數是數字步數。如果步驟與步驟數量相同，每個主要畫面格都會依照步驟的確切時間長度依序播放，而且不會轉換狀態。如果主要畫面格少於步驟數，瀏覽器會根據第二個引數，在主要畫面格之間新增步驟。
第二個引數是方向。如果設為 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;
}
您可以利用動畫方向，設定時間軸在主要畫面格上的執行方向。這個方向會採用下列值：
normal：預設值，也就是向前顯示的值。reverse：向後延伸至時間軸。alternate：針對每個動畫疊代，時間軸會交替執行，並向後執行。alternate-reverse：類似alternate，但動畫會從反向執行時間軸開始。
animation-delay
.my-element {
animation-delay: 5s;
}
animation-delay 屬性所定義的是瀏覽器啟動動畫前的等待時間長度。和 animation-duration 屬性一樣，這個值需要時間值。
有別於 animation-duration，您「可以」將 animation-delay 定義為負值，讓動畫從時間軸中對應的時間點開始。舉例來說，如果動畫長度為 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：第一個和最後一個主要畫面格都會保留下來。
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 相同。0和1animation-timing-function 也稱為：
@keyframes 動畫中的主要畫面格數量下限為何？