CSS 動畫：Transition 與 Keyframes

CSS 動畫讓網頁元素動起來。Transition 做簡單的過渡效果，@keyframes 定義複雜的動畫序列。兩者都不需要 JavaScript。

Transition：過渡效果

選擇效果和速度，然後按「觸發」看過渡動畫。

效果

速度：0.3s

套用對象

.box { transition: all 0.3s ease; } .box:hover { background: #ec4899; }

@keyframes：持續動畫

選擇動畫類型，調整速度和節奏。

動畫

速度：1s

節奏

套用對象

🔔

自訂動畫

調整參數，打造你自己的 @keyframes 動畫。

變化屬性

幅度：180°

速度：1s

@keyframes customAnim { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(0deg); } } .box { animation: customAnim 1s ease infinite; }

Transition vs Animation：什麼時候用哪個？

Transition（過渡）

✅ hover、focus 等狀態變化
✅ 只有 A → B 兩個狀態
✅ 需要使用者觸發
📝 transition: all 0.3s ease;

Animation（動畫）

✅ 持續播放、自動開始
✅ 多階段（0% → 50% → 100%）
✅ 不需要使用者觸發
📝 animation: bounce 1s infinite;

跟 AI 溝通時：想要 hover 變色？說「加 transition 0.3s」。想要持續彈跳？說「用 @keyframes bounce，infinite」。知道這兩個詞的差別，AI 就能精確幫你做出想要的動畫效果。

下一課