CSS 動畫屬性探索：keyframes 和 animation
引言：
CSS 動畫已經成為現代網頁設計的重要組成部分。它可以為網頁增添鮮明的互動效果，提升使用者體驗。在 CSS 中，我們可以利用 keyframes 和 animation 這兩個屬性來創造各種酷炫的動畫效果。本文將帶大家深入探索這兩個屬性，並提供具體的程式碼範例。
一、什麼是 keyframes？
在 CSS 中，keyframes 是用來定義動畫關鍵影格的關鍵字。我們可以使用 " @keyframes " 規則來定義一個動畫序列。具體的語法如下：
@keyframes animation_name { 0% { /* 前景样式 */ } 50% { /* 中间样式 */ } 100% { /* 结束样式 */ } }
在這個範例中，animation_name 是動畫的名稱，0%、50%、100% 是動畫的關鍵影格。在每一個關鍵影格中，我們可以定義元素在動畫過程中的樣式。
二、什麼是 animation？
animation 是用來指定元素套用動畫的屬性。我們可以使用 " animation " 屬性將定義好的 keyframes 套用到元素上。具體的語法如下：
animation: animation_name duration timing_function delay iteration_count direction fill_mode play_state;
在這個例子中，animation_name 是我們定義的動畫名稱，duration 是動畫的持續時間，timing_function 是動畫的緩動函數，delay 是動畫的延遲時間，iteration_count 是動畫的重複次數，direction 是動畫的播放方向，fill_mode 是動畫的填滿模式，play_state 是動畫的播放狀態。
三、具體程式碼範例：
下面我們來看幾個具體的程式碼範例，幫助大家更能理解 keyframes 和 animation 的使用。
漸層背景動畫：
HTML：
CSS：
@keyframes gradient { 0% { background-color: red; } 50% { background-color: blue; } 100% { background-color: green; } } .box { width: 200px; height: 200px; animation: gradient 5s linear infinite; }
在這個例子中，我們定義了一個漸層色背景動畫。 box 元素會在 5 秒內循環播放從紅色到藍色再到綠色的漸層動畫。
元素移動動畫：
HTML：
CSS：
@keyframes move { 0% { transform: translateX(0%); } 50% { transform: translateX(50%); } 100% { transform: translateX(100%); } } .box { width: 100px; height: 100px; background-color: red; animation: move 3s ease-in-out infinite alternate; }
在這個範例中，我們定義了一個元素移動動畫。 box 元素會在 3 秒內循環播放從初始位置到右邊 50% 的位置再到右邊 100% 的位置的移動動畫，並且往返播放。
閃爍文字動畫：
HTML：
Hello, World!
CSS：
@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } .box { animation: blink 1s steps(1) infinite; }
在這個範例中，我們定義了一個閃爍文字動畫。 box 元素的文字內容會在 1 秒內循環播放從完全不透明到完全透明再到完全不透明的閃爍效果。
結論：
透過對 keyframes 和 animation 的深入探索，我們可以發現它們在創建各種酷炫動畫效果方面有著巨大的潛力。透過合理地結合各種屬性，我們可以創造出豐富多元的動畫效果，提升網頁的互動體驗。希望本文的內容能幫助大家更能理解並應用這兩個屬性。
以上是CSS 動畫屬性探索：keyframes 和 animation的詳細內容。更多資訊請關注PHP中文網其他相關文章！
