CSS 動畫與轉場：快速指南

介紹

CSS 動畫和過渡是強大的工具，可以讓您的網頁栩栩如生。它們使您能夠創建流暢、引人入勝、具有視覺吸引力的效果，從而增強用戶體驗。無論您是想添加狀態之間的簡單轉換還是吸引註意力的複雜動畫，了解這些功能的基礎知識都是至關重要的。在本指南中，我們將介紹如何創建淡入效果、CSS 過渡和動畫之間的區別、創建無限關鍵幀動畫、延遲開始過渡，以及使用動畫定時函數創建彈跳效果。

您可以透過我為每個範例新增的 Codepen 與程式碼進行互動和操作！

如何使用 CSS 動畫創造淡入效果？

要建立淡入效果，您可以使用@keyframes規則來定義動畫的階段。關鍵影格指定動畫的開始和結束狀態，動畫屬性將動畫套用到元素。這是一個例子：

在此程式碼中：

• .fade-in 類別在 2 秒內套用 fadeIn 動畫，並具有緩入淡出計時功能。

• @keyframes fadeIn 規則定義動畫，將不透明度從 0 改為 1。

CSS 轉場和動畫有什麼不同？

CSS 轉換:

• 用於當元素從一種狀態變更為另一種狀態時的簡單狀態變更。

• 需要觸發器（如 :hover、:focus 或 :checked）來開始轉換。

• 自動將屬性從初始狀態內插到最終狀態。

在此範例中，懸停時 .box 元素的背景顏色將在 0.5 秒內轉變為藍色。

CSS 動畫:

• 用於更複雜的動畫序列，涉及多個階段。

• 使用 @keyframes 定義，不需要觸發器即可啟動。

• 可以自動運行，無限循環，並提供對時間和順序的更多控制。

在此範例中，.rotate 類別會套用連續旋轉動畫，每 2 秒完成一次完整旋轉。

如何創造無限運行的關鍵影格動畫？

要建立無限運行的動畫，請使用animation-iteration-count 屬性並將其值設為infinite。這使得動畫無限循環。這是一個例子：

.spin 類別將使元素連續旋轉，每 2 秒完成一次完整旋轉。

如何延遲 CSS 過渡的開始？

要延遲過渡的開始，請使用過渡延遲屬性。此屬性指定轉換在開始之前應等待多長時間。這是一個例子：

在此範例中，背景顏色將在 :hover 事件觸發後 2 秒變為熱粉紅色，過渡需要 0.5 秒才能完成。

如何使用動畫定時功能來創造彈跳效果？

animation-timing-function 屬性可以與自訂三次貝塞爾值或預訂關鍵字一起使用來建立各種效果。對於反彈效果，您可以定義關鍵影格並使用緩動或自訂三次貝塞爾值。這是一個例子：

在此範例中：

• @keyframes 彈跳規則透過上下移動元素來定義彈跳效果。

• .bounce 類應用程式彈跳動畫，該動畫每 2 秒無限重複一次，並具有輕鬆計時功能。

結論

希望這篇文章對您有幫助，我們下一篇見！

以上是CSS 動畫與轉場：快速指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！