一、CSS 動畫的三個核心工具
製作 CSS 動畫時，最常使用的工具是 transition、transform 和 animation。它們各自負責不同的工作：
transform：改變元素的位置、大小、角度或傾斜程度
transition：讓 CSS 屬性的變化過程更加平滑
animation：建立多階段、循環或自動播放的動畫
舉例來說，當滑鼠移到按鈕上時，可以用 transform 將按鈕放大，再用 transition 讓放大的過程平順呈現。如果動畫需要在頁面載入後自動播放，或持續循環，則適合使用 animation。
二、使用 transition 製作平滑的狀態變化
transition 適合處理元素從一個狀態變成另一個狀態的效果，例如滑鼠移入、按下按鈕或輸入框取得焦點。
.button {
padding: 12px 24px;
color: white;
background-color: #2563eb;
border: 0;
border-radius: 8px;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #1e40af;
}
這段程式會讓按鈕的背景顏色在 0.3 秒內平滑改變。ease 是速度曲線，表示動畫開始與結束時較慢，中間較快。
如果有多個屬性需要過渡，可以分別設定：
.button {
transition:
background-color 0.3s ease,
transform 0.3s ease;
}
雖然也能使用 transition: all，但瀏覽器會嘗試監控所有可變化的屬性。實際製作網站時，明確寫出需要改變的屬性，通常更容易維護。
transform 可以改變元素的視覺狀態，而且不會重新安排周圍元素的位置，因此很適合用於網頁互動效果。
常見的轉換函式包括：
.example {
transform: translateY(-10px); /* 向上移動 */
transform: scale(1.1); /* 放大 */
transform: rotate(5deg); /* 旋轉 */
transform: skewX(10deg); /* 水平傾斜 */
}
同一個元素如果需要多種變化，應該寫在同一個 transform 中：
.card:hover {
transform: translateY(-8px) scale(1.03);
}
搭配 transition 後，就能製作自然的卡片浮起效果：
.card {
transition:
transform 0.25s ease,
box-shadow 0.25s ease;
}
.card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 30px rgb(0 0 0 / 15%);
}
不要分開寫兩次 transform，因為後面的設定會覆蓋前面的設定。
四、使用 animation 建立自動與循環動畫
當效果不需要使用者觸發，或包含多個變化階段時，可以使用 animation 搭配 @keyframes。
以下是一個上下浮動的動畫：
.icon {
animation: floating 2s ease-in-out infinite;
}
@keyframes floating {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-12px);
}
100% {
transform: translateY(0);
}
}
animation 的設定依序包含動畫名稱、播放時間、速度曲線和播放次數。infinite 表示無限循環。
也可以加入延遲、播放方向或動畫結束狀態：
.message {
animation: fade-in 0.6s ease 0.2s both;
}
@keyframes fade-in {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
both 會讓元素在動畫開始前及結束後，保留關鍵影格所定義的狀態。
五、效能、無障礙與使用原則
動畫雖然能提升網站質感，但數量太多或速度太慢，也可能干擾閱讀。一般互動效果可控制在 0.2 至 0.4 秒左右，重要內容則不應依賴動畫才能被看見或操作。
效能方面，優先改變 transform 和 opacity，通常會比持續改變元素的寬度、高度或位置更流暢。
此外，部分使用者可能因動態效果感到不適。可以使用 prefers-reduced-motion，尊重作業系統中的「減少動態效果」設定：
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
好的 CSS 動畫應該協助使用者理解操作結果，例如提示按鈕可以點擊、顯示選單正在開啟，或說明內容已經更新。先確定動畫的用途，再加入適量效果，才能同時兼顧美觀、效能與操作體驗。