CSS 動畫屬性進階：keyframes 和 animation

CSS 動畫屬性進階：keyframes 和animation

CSS 動畫是網頁設計中重要的一部分，它可以透過展示連續的圖像來營造出流動的效果，增加頁面的視覺吸引力。在CSS中，我們可以使用多種動畫屬性來創造各種效果。本文將重點介紹兩個核心的動畫屬性：keyframes 和 animation，並提供具體的程式碼範例。

一、keyframes
Keyframes 是定義動畫序列的關鍵影格規則。每個規則可以指定在動畫週期的特定時間點上元素的樣式。下面是一個簡單的 keyframes 範例：

@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

在上面的範例中，我們使用 @keyframes 關鍵字來定義一個名為 fade-in 的動畫。這個動畫從透明度為0的狀態（0%）漸變到透明度為1的狀態（100%）。我們可以使用任何百分比值來定義關鍵影格規則。

二、animation
animation 屬性是一個簡寫屬性，用來同時設定一系列由@keyframes 規則指定的動畫屬性。以下是使用animation 屬性的範例：

.element {
  animation-name: fade-in;
  animation-duration: 3s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

在上面的範例中，我們使用animation-name 屬性來指定要套用的動畫名稱，animation-duration 屬性來指定動畫的持續時間（3秒） ，animation-delay 屬性來指定動畫的延遲時間（1秒），animation-fill-mode 屬性來指定動畫結束後元素的狀態將保持為最後一個關鍵幀的狀態，animation-timing-function 屬性用於指定動畫的時間曲線。

三、結合使用 keyframes 和 animation
結合使用 keyframes 和 animation 屬性可以創造出更複雜的動畫效果。以下是一個結合使用keyframes 和animation 屬性的例子：

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.element {
  animation-name: pulse;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

在上面的例子中，我們定義了一個名為pulse 的動畫，它透過不同的關鍵影格規則在元素上應用了放大和縮小的效果。我們使用 animation-iteration-count 屬性將動畫設定為無限循環。

總結：
keyframes 和 animation 是CSS動畫中非常重要的兩個屬性。 keyframes 用於定義動畫序列的關鍵影格規則，可以指定在動畫週期的特定時間點上元素的樣式。 animation 屬性則用於同時設定一系列由@keyframes 規則指定的動畫屬性。結合使用這兩個屬性可以創造出各種複雜的動畫效果。

希望本文的程式碼範例能幫助讀者更能理解並運用 CSS 動畫屬性 keyframes 和 animation。當然，這只是動畫的基礎，還有更多更強大的 CSS 動畫技巧等著我們去探索。讓我們一起加油，創造出令人驚嘆的網頁動畫吧！

以上是CSS 動畫屬性進階：keyframes 和 animation的詳細內容。更多資訊請關注PHP中文網其他相關文章！