CSS 動畫入門：transition、@keyframes 寫法，Animate.css 怎麼用（WordPress 適用）

網頁上的動畫，用 CSS 就做得到，不用 JavaScript。分成兩種：

• transition（轉場）：狀態改變時「慢慢變過去」，例如滑鼠移到按鈕上，顏色在 0.2 秒內變深。
• @keyframes（關鍵影格）：自己會動的動畫，例如頁面打開時標題從下面淡入、LINE 按鈕一直有光圈擴散。

transition：滑鼠移上去慢慢變

.btn {
  background: #1e8a8a;
  /* 要變化的屬性、花多久、怎麼變化 */
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.btn:hover {
  background: #16696a;
  transform: translateY(-2px);
}

transition 寫在原本的狀態上（不是 :hover 裡），依序是：

• 要變化的屬性：background-color、transform。多個屬性用逗號分開。
• 花多久：0.2s 是 0.2 秒。按鈕、連結這類小東西，0.15 到 0.3 秒最自然，太慢會覺得反應遲鈍。
• 速度曲線：ease 是先快後慢，另外常用 ease-out（一開始快、最後慢下來）、linear（等速）。

不要寫 transition: all。所有屬性都會轉場，連不想動的東西（例如版面寬度）也會慢慢變，還會讓瀏覽器多做很多計算。要動哪幾個，就寫哪幾個。

實測：滑鼠移上去 0.2 秒後，按鈕變成深綠色 rgb(22, 105, 106)，往上移了 2 像素。

@keyframes：自己會動的動畫

做法分兩步：先用 @keyframes 定義動畫長什麼樣子，再用 animation 套用到元素上。

/* 定義一段動畫：從下面淡入 */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* 套用：名稱、時間、速度曲線、播完停在最後一格 */
.reveal {
  animation: fade-up 0.6s ease-out both;
}
.reveal.second { animation-delay: 0.15s; } /* 第二個晚一點出現 */

• from、to：開始和結束的樣子。中間要有變化，可以用百分比，例如 50% { ... }。
• animation: fade-up 0.6s ease-out both：依序是動畫名稱、時間、速度曲線，最後的 both 是「開始前停在第一格、播完停在最後一格」。不加的話，第二段在等待的 0.15 秒裡會先閃一下原本的樣子，播完也可能跳回去。
• animation-delay：延後開始，讓幾個元素依序出現。

一直重複的動畫

/* LINE 按鈕外圍一圈一圈擴散，一直重複 */
@keyframes ring {
  from { box-shadow: 0 0 0 0 rgb(6 199 85 / 50%); }
  to   { box-shadow: 0 0 0 14px rgb(6 199 85 / 0%); }
}
.line-btn {
  animation: ring 1.8s ease-out infinite;
}

infinite 表示無限重複。實測這個 LINE 按鈕的光圈每 1.8 秒擴散一次，一直重複。

animation 常用的參數整理：

• animation-name：用哪一段 @keyframes，例如 fade-up。
• animation-duration：播一次多久，例如 0.6s。
• animation-timing-function：速度曲線，例如 ease-out。
• animation-delay：延後多久開始，例如 0.15s。
• animation-iteration-count：播幾次，例如 1、3、infinite。
• animation-direction：方向，例如 alternate（來回）。
• animation-fill-mode：前後停在哪一格，例如 both。

哪些屬性適合做動畫

動畫最好只動 transform（移動、旋轉、縮放）和 opacity（透明度）。這兩個瀏覽器可以直接交給顯示卡處理，動起來順。

用 width、height、top、left、margin 做動畫，每一格瀏覽器都要重新排版整個頁面，手機上容易卡頓。例如「往上浮」用 transform: translateY()，不要用 margin-top。transform 的寫法可以看CSS transform 怎麼用。

照顧不喜歡動畫的人

有些人看到畫面一直動會頭暈、不舒服，會在手機或電腦的系統設定打開「減少動態效果」。CSS 可以知道這個設定：

/* 系統設定「減少動態效果」的人：動畫、轉場幾乎立刻結束 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

• prefers-reduced-motion: reduce 只有在使用者打開這個設定時才生效，其他人照常看到動畫。
• 把時間改成 0.01 毫秒，而不是直接拿掉動畫：元素還是會跑到「最後的樣子」，淡入的標題不會因此停在看不見的狀態。

實測：用 Chrome 模擬「減少動態效果」，按鈕的轉場、淡入、LINE 光圈的時間都變成 0.01 毫秒，光圈只播一次；按鈕移上去一樣會變色、上移，只是沒有過程。

現成的動畫：Animate.css

Animate.css 是一套現成的 CSS 動畫，有淡入、彈跳、搖晃、滑入等幾十種效果，載入之後加 class 就能用。

<!-- 在 <head> 載入 Animate.css 4.1.1 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

<!-- 加兩個 class：animate__animated 加上效果名稱 -->
<h2 class="animate__animated animate__fadeInUp">限時優惠</h2>

<!-- 想慢一點：改這個元素的動畫時間 -->
<p class="animate__animated animate__fadeIn" style="--animate-duration: 2s;">活動到月底</p>

• 每個要動的元素都要加 animate__animated，再加一個效果名稱，例如 animate__fadeInUp、animate__bounce。效果名稱在官網可以一個一個點來看。
• 每個效果預設播 1 秒。用 --animate-duration 可以改時間，實測加了 --animate-duration: 2s 的那段變成 2 秒。
• Animate.css 自己就有處理「減少動態效果」：實測打開這個設定後，Animate.css 的動畫時間都變成 1 毫秒。

載入 WordPress

把這段放在子佈景主題的 functions.php：

<?php
// WordPress 載入 Animate.css（放在子佈景主題的 functions.php）
add_action( 'wp_enqueue_scripts', function () {
	wp_enqueue_style(
		'animate-css',
		'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css',
		array(),
		null
	);
} );

測試站實測，網頁的 <head> 會多一行載入 animate.min.css 的連結。最後一個參數 null 表示不在網址後面加版本號，網址裡已經有 4.1.1 了。

之後在區塊編輯器選取要動的區塊，右邊「進階設定」的「附加的 CSS 類別」填 animate__animated animate__fadeInUp，就會在頁面打開時播放。

要注意的地方

• 檔案大小：animate.min.css 約 70 KB，經過壓縮傳輸實際約 4 KB。只用一兩個效果的話，也可以照上面 @keyframes 的寫法自己寫，連這個檔案都不用載入。
• 頁面打開就播：Animate.css 的動畫在頁面載入時就播放，捲到很下面的區塊，等訪客捲到時早就播完了。要「捲到才播」需要另外加 JavaScript。
• 授權：CDN 上的 4.1.1 版是 MIT 授權（檔案開頭有寫），商業網站可以免費使用。GitHub 上最新的原始碼已經改成 Hippocratic License 2.1，之後如果出新版本，更新前要先看授權。

動畫要節制

一頁裡到處都在動，訪客反而不知道該看哪裡。動畫最好只用在需要注意的地方：按鈕的回饋、重要訊息的出現、聯絡按鈕的提醒，其他地方安靜就好。

延伸閱讀

• CSS transform 怎麼用：位移、旋轉、縮放、transform-origin
• 網頁側邊浮動按鈕怎麼做：LINE、電話、回到頂端、分享，純 HTML＋CSS
• CSS 文字陰影、發光、描邊怎麼寫：text-shadow、text-stroke、多層陰影範例

正威網路行銷是 25 年經驗的基隆網頁設計工作室，提供 RWD 響應式客製化網頁設計，台北與全台客戶也歡迎來聊聊。