CSS 動畫 animation：關鍵影格與播放設定
CSS Animation 是一種讓 HTML 元素在網頁上產生動態效果的方法。透過定義動畫的關鍵影格與設定元素的動畫屬性，您可以製作平滑的轉場、移動、變形、淡入、淡出等視覺效果。CSS Animation 主要由兩部分組成：
@keyframes規則: 定義動畫的關鍵影格。animation屬性: 將動畫應用到元素上。
@keyframes
@keyframes 是 CSS Animation 的核心之一，用來定義動畫過程中 各個時間點 的樣式變化。您可以把它想像成告訴瀏覽器，在某段時間內，這個元素要怎麼改變外觀。
以下為簡單定義方式:
@keyframes 動畫名稱 {
from {
/* 動畫開始時的樣式 */
}
to {
/* 動畫結束時的樣式 */
}
}以下為詳細定義方式:
@keyframes 動畫名稱 {
0% {
/* 動畫開始時的樣式 */
}
50% {
/* 動畫進行到中間的樣式 */
}
100% {
/* 動畫結束時的樣式 */
}
}animation
animation 就是 播放某段定義好的 @keyframes 指令。
animation-name
指定要播放的 @keyframes 名稱。
animation-name: 動畫名稱;animation-duration
指定動畫播放的時間。例如：.5s、200ms。單位的設定可以參考這篇 單位表示法。
animation-duration: 2s;animation-delay
指定延遲動畫播放的時間。例如：.2s、200ms。單位的設定可以參考這篇 單位表示法。
animation-delay: 2s;animation-iteration-count
指定控制動畫的播放次數。
3: 執行 3 次。infinite: 無限循環。
animation-iteration-count: infinite;animation-direction
指定控制動畫的播放方向。
normal: 正常方向。reverse: 反向。alternate: 正向 → 反向 → 正向。alternate-reverse: 反向 → 正向 → 反向。
animation-direction: alternate。;animation-timing-function
指定轉長動畫的速度曲線。例如：ease、linear、ease-in...等。
linear: 線性。ease: 先慢後快再慢 (預設值)。ease-in: 由慢到快 (加速)。ease-out: 由快到慢 (減速)。ease-in-out: 慢 → 快 → 慢。step-start: 動畫會在轉場一開始就直接跳到最終狀態。step-end: 動畫會在轉場結束時才直接跳到最終狀態。cubic-bezier(n,n,n,n): 自訂貝茲曲線。
animation-timing-function: ease-in;animation-fill-mode
forward: 動畫結束後保持結束時的樣式。backward: 動畫結束後返回開始時的樣式。
animation-fill-mode: forward。;animation-play-state
控制動畫的播放狀態。
running: 播放中。paused: 暫停。
animation-play-state: paused;播完之後停在哪
.fade-in {
animation: fade 0.6s ease forwards;
}
@keyframes fade {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: none; }
}預設播完會跳回原本的樣式，加上 forwards 才會 停在最後一個關鍵影格。
來回播放
.pulse {
animation: pulse 1.2s ease-in-out infinite alternate;
}
@keyframes pulse {
to { transform: scale(1.06); }
}alternate 讓動畫播到終點後反向播回起點，搭配 infinite 就是常見的呼吸效果。
小提醒
動畫請優先改變 transform 與透明度，並記得為關閉動態效果的使用者提供 prefers-reduced-motion 的處理。
常見問題
動畫結束後為什麼跳回原狀？
因為預設在播完之後會回到原本的樣式。把 animation-fill-mode 設成 forwards，就會停在最後一個關鍵影格的狀態。
關鍵影格可以設幾個？
不限。除了起點與終點，中間可以用百分比插入任意多個階段，百分比相同的幾個影格也能合併寫在一起。
要怎麼讓動畫來回播放？
把 animation-direction 設成 alternate，播到終點後會反向播回起點；再搭配 infinite，就是常見的呼吸或脈動效果。
animation 會影響效能嗎？
取決於動什麼。位移、縮放與透明度由合成層處理最順；改寬高、位置或陰影則會觸發重新排版與重繪，動畫容易卡。
