CSS 動畫屬性探索：keyframes 和 animation

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 的使用。

1. 漸層背景動畫：
   HTML：

   <div class="box"></div>

   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 秒內循環播放從紅色到藍色再到綠色的漸層動畫。

2. 元素移動動畫：
   HTML：

   <div class="box"></div>

   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% 的位置的移動動畫，並且往返播放。

3. 閃爍文字動畫：
   HTML：

   <div class="box">Hello, World!</div>

   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中文網其他相關文章！