CSS 動畫：讓網頁動起來

你好啊，未來的網頁魔法師們！今天，我們要深入 CSS 動畫的神奇世界。在這個教學結束時，你將能夠讓元素在你的網頁上像數字化的弗雷德·阿斯泰爾一樣跳起舞來。所以，穿好你的虛擬舞鞋，我們來開始吧！

什麼是 CSS 動畫？

CSS 動畫就像給你的網頁上的靜態元素賦予生命。想像一下，如果你能讓按鈕在用戶悬停時脈動，或者在頁面加載時讓標誌旋轉。這就是 CSS 動畫的力量！它讓你能在給定時間內改變 CSS 屬性值，創造出移動和視覺興趣，而不需要複雜的 JavaScript 或 Flash。

@keyframes 規則

CSS 動畫的核心是 @keyframes 規則。這裡是你定義動畫階段的地方。

@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0); }
}

在這個例子中，我們創建了一個名為 "bounce" 的動畫。在 0%（開始時），元素處於原始位置。在 50%（動畫的中途），它向上移動 20 像素。在 100%（結束時），它回到原始位置。

動畫延遲屬性

有時候，你希望你的動畫在開始前等待。這就是 animation-delay 屬性派上用場的地方。

.delayed-bounce {
animation-name: bounce;
animation-duration: 1s;
animation-delay: 2s;
}

這段 CSS 將把 "bounce" 動畫應用於任何具有 "delayed-bounce" 類的元素。動畫將持續 1 秒，但它會在頁面加載後等待 2 秒才開始。

設置動畫迭代次數

默認情況下，動畫會運行一次然後停止。但如果你希望你的動畫持續運行，就像永不停歇的兔子一樣，那麼 animation-iteration-count 就派上用場了。

.infinite-bounce {
animation-name: bounce;
animation-duration: 1s;
animation-iteration-count: infinite;
}

現在我們的彈跳元素將永遠繼續彈跳，或者直到用戶關閉頁面（哪個先發生就結束）！

動畫方向屬性

有時候，你可能希望你的動畫反方向運行，或者在前後方向之間交替。animation-direction 屬性讓你可以做到這一點。

.alternate-bounce {
animation-name: bounce;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}

這會讓我們的元素像永恆運動機器一樣不斷地上上下下彈跳（如果我們能夠利用這個為乾淨能源，那該多好）！

動畫時間函數

animation-timing-function 屬性讓你可以控制動畫的速度。這就像是你自己的數字樂團的指揮！

.ease-in-out-bounce {
animation-name: bounce;
animation-duration: 1s;
animation-timing-function: ease-in-out;
}

這會讓我們的彈跳動畫在開始時慢慢加速，在中间時加快，然後在結束時減速，給它一種更自然、更有彈性的感覺。

設置動畫填充模式

animation-fill-mode 屬性決定了元素在動畫之前和之後應該看起來如何。

.fill-mode-bounce {
animation-name: bounce;
animation-duration: 1s;
animation-fill-mode: forwards;
}

使用 forwards 時，元素將保留最後一個關鍵幀的樣式，而不是彈回原始狀態。

動畫簡寫屬性

如果你覺得這些屬性讓人眼花繚亂，別擔心！CSS 提供了一個簡寫屬性，用於一次性設置所有動畫屬性：

.shorthand-bounce {
animation: bounce 1s ease-in-out 2s infinite alternate forwards;
}

這一行代碼設置了動畫名稱、持續時間、時間函數、延遲、迭代次數、方向和填充模式。這就像是 CSS 動畫的瑞士軍刀！

CSS 動畫屬性列表

這裡是一個我們討論過的所有 CSS 動畫屬性的便捷表格：

屬性	描述
animation-name	指定 @keyframes 動畫的名稱
animation-duration	指定動畫完成一次循環所需的時間
animation-timing-function	指定動畫的速度曲線
animation-delay	指定動畫開始的延遲時間
animation-iteration-count	指定動畫應播放的次數
animation-direction	指定動畫是否應在反向循環中播放
animation-fill-mode	指定動畫執行時間之外應應用的值
animation	簡寫屬性，用於一次性設置所有動畫屬性

好了，各位！現在你已經掌握了使用 CSS 動畫讓你的網頁生動起來的知識。記住，能力越強，責任越大 - 使用這些動畫來增強用戶體驗，而不是分散他們的注意力。

隨著你練習，你會發現 CSS 動畫就像烹飪一樣 - 準備正確的配方需要時間。但一旦你做到了，你就能提供美味的、動畫化的網頁體驗，讓你的用戶想要更多！

現在去創作吧，我的數字皮克斯學徒們。網絡是你的畫布，CSS是你的畫筆。祝你動畫愉快！

Credits: Image by storyset