CSS 動畫 – 讓元素栩栩如生

第 13 講：CSS 動畫 – 讓元素栩栩如生

歡迎來到《從基礎到輝煌》課程第13講！在這篇文章中，我們將探索 CSS 動畫——一種透過隨著時間的推移為網頁元素添加動畫效果的強大方法。透過 CSS 動畫，您可以創造出流暢的動態效果，從而增強使用者體驗和參與度。

1. CSS 動畫概述

CSS 動畫允許元素在定義的時間內在不同樣式之間轉換。您可以使用兩個關鍵屬性來控制動畫的工作方式：

• @keyframes：定義動畫在特定時刻的行為。
• 動畫：將動畫應用於元素並控制其時間和持續時間。

2. @keyframes 規則

@keyframes 規則指定元素在動畫過程中不同點應具有的樣式。您可以以不同的百分比定義關鍵影格（0% 為開始，100% 為結束）。

• 範例：更改背景顏色的基本關鍵影格動畫。

  @keyframes changeColor {
    0% {
      background-color: red;
    }
    100% {
      background-color: blue;
    }
  }

在此範例中：

• 背景顏色會隨著動畫的進行逐漸從紅色變成藍色。

3.使用動畫屬性套用動畫

要將動畫套用到元素，可以使用animation 屬性。此屬性需要幾個鍵值：

• 名稱：關鍵影格動畫的名稱（例如，changeColor）。
• 持續時間：動畫應運行多長時間（例如，2 秒錶示 2 秒）。
• 計時函數：動畫的速度曲線（例如，緩動、線性）。

• 延遲：開始動畫前等待多久。

• 範例：將動畫應用於元素。
  

  .box {
    animation: changeColor 2s ease-in-out infinite;
  }

在這種情況下：

• .box 元素將在 2 秒內從紅色變為藍色，遵循緩入曲線，動畫將無限重複。

4.動畫計時函數

計時函數控制動畫如何隨時間進展。一些常見的計時功能包括：

• 線性：動畫以恆定速度進行。
• ease：動畫開始緩慢，加速，然後減慢。
• ease-in：動畫開始緩慢並加速。

• ease-out：動畫開始時快，然後減慢。

• 範例：應用不同的計時函數。
  

  .box {
    animation: changeColor 3s linear;
  }

這裡：

• 動畫將以恆定速度進行，需要 3 秒才能完成。

5.動畫迭代與延遲

您可以使用animation-iteration-count屬性來控制動畫重複的次數。您也可以使用animation-delay來延遲動畫的開始。

• 範例：重複 3 次並在 1 秒延遲後開始的動畫。

  .box {
    animation: changeColor 2s ease-in 3;
    animation-delay: 1s;
  }

在這種情況下：

• 動畫將在頁面載入後 1 秒開始並重複 3 次。

6.動畫填滿模式

animation-fill-mode 屬性定義元素在動畫前後的外觀。常見值包括：

• none：動畫結束後元素回到原始狀態。
• forwards：元素保留動畫的最終狀態。

• 向後：元素在動畫開始之前呈現初始狀態。

• 範例：保持動畫後的最終狀態。
  

  .box {
    animation: changeColor 2s ease forwards;
  }

這裡：

• 動畫完成後元素將保持藍色，而不是恢復為紅色。

7.多動畫

您可以將多個動畫套用到一個元素，用逗號分隔它們。

• 範例：對顏色和位置進行動畫處理。

  @keyframes moveBox {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(100px);
    }
  }

  .box {
    animation: changeColor 2s ease, moveBox 2s ease-in-out;
  }

在這種情況下：

• .box 將改變顏色並同時向右移動 100px。

8.瀏覽器支援與前綴屬性

雖然現代瀏覽器支援 CSS 動畫，但為舊版瀏覽器添加供應商前綴始終是個好主意。

• Example: Adding vendor prefixes.

  .box {
    -webkit-animation: changeColor 2s ease;
    -moz-animation: changeColor 2s ease;
    animation: changeColor 2s ease;
  }

This ensures compatibility across different browsers.

Practice Exercise

1. Create a bouncing ball animation using @keyframes that makes the ball move up and down smoothly.
2. Add an animation to an image that rotates it 360 degrees on hover.

Next Up: In the next lecture, we’ll explore CSS Transitions, which allow you to animate changes in CSS properties smoothly. You’ll learn how to create engaging hover effects and other interactions that enhance user experience.

follow me on LinkedIn

Ridoy Hasan

以上是CSS 動畫 – 讓元素栩栩如生的詳細內容。更多資訊請關注PHP中文網其他相關文章！