CSS 動畫提供了一種純粹透過樣式表，為網頁元素添加動態效果的方法，不需依賴 JavaScript 或其他外部函式庫。本文將介紹 CSS 動畫的基本概念與應用，幫助你理解並使用 CSS animation。
CSS 動畫的基本概念
CSS 動畫的重點在於 @keyframes ，@keyframes 定義了動畫的關鍵影格，描述元素在特定時間點應呈現的樣式。透過設定不同的百分比或關鍵字（如 from 和 to），可以指定動畫的起始與結束狀態，以及中間過渡的樣式。
/* from 和 to 關鍵字 */
@keyframes fade {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
/* 使用百分比來精確控制 */
@keyframes fade {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 0;
}
}
animation 屬性
定義完@keyframes 後，需要將動畫套用到特定的元素上。這可以透過 animation 屬性來實現。animation 是多個子屬性的縮寫：animation-name：指定要使用的動畫名稱，對應 @keyframes 定義的名稱。animation-duration：動畫持續時間。animation-timing-function：動畫的速度曲線。animation-delay：動畫開始前的延遲時間。animation-iteration-count：動畫重複次數，infinite 表示無限次。animation-direction：動畫播放方向，如 normal、reverse、alternate 等。animation-fill-mode：設定動畫開始前和結束後，元素的樣式狀態。animation-play-state：控制動畫的播放或暫停。
div {
animation-name: fade;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: both;
}
動畫速度曲線：animation-timing-function
animation-timing-function 屬性決定動畫在不同時間點的速度變化，以下是常用的值：
- linear：動畫從頭到尾以相同速度進行。
- ease：動畫以較慢的速度開始和結束，中間速度較快。
- ease-in：動畫以較慢的速度開始，然後加快。
- ease-out：動畫以較快的速度開始，然後減慢。
- ease-in-out：動畫以較慢的速度開始，中間加快，然後再減慢。
動畫播放方向：animation-direction
animation-direction 控制動畫的播放方向，以下是常用的值：
normal：動畫按正常順序播放（預設值）。reverse：動畫按相反順序播放。alternate：動畫先按正常順序播放，然後反向播放，交替進行。alternate-reverse：動畫先反向播放，然後按正常順序播放，交替進行。
動畫前後樣式：animation-fill-mode
animation-fill-mode 定義動畫開始前和結束後的元素樣式，以下是常用的值：
none：動畫執行前後，元素樣式不受影響（預設值）。forwards：動畫結束後，元素保留最後一個關鍵幀的樣式。backwards：動畫開始前，元素應用第一個關鍵幀的樣式。both：元素在動畫開始前應用第一個關鍵幀的樣式，動畫結束後保留最後一個關鍵幀的樣式。
結語
透過理解和運用 CSS 動畫的各項屬性，我們可以為網頁添加各種動態效果，但要注意，動畫雖然好看，不代表越多越好，動畫應該是輔助資訊呈現、提升使用體驗的。