動畫基礎

開放

6.1 @keyframes 規則

CSS 動畫允許你用最小的努力創建複雜和平滑的視覺效果。創建 CSS 動畫的主要工具是 @keyframes 規則,它定義動畫的關鍵幀和在每個幀上應該發生的樣式變化。

@keyframes 規則用於創建動畫,定義在動畫執行過程中不同階段的 CSS 屬性更改。關鍵幀定義了在動畫過程中哪些時間點會應用哪些樣式。

語法 1:

@keyframes animation-name {
  from {
    /* 初始樣式 */
  }

  to {
     /* 最終樣式 */
  }
}

語法 2:

@keyframes animation-name {
  0% {
    /* 初始樣式 */
  }

  100% {
     /* 最終樣式 */
  }
}

其中:

  • from 對應於動畫時間的 0%
  • to 對應於動畫時間的 100%

示例:平滑改變背景顏色

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Animation Example</title>
    <style>
      @keyframes changeColor {
        from {
          background-color: lightblue;
        }

        to {
          background-color: lightcoral;
        }
      }

      .animated-box {
        width: 200px;
        height: 200px;
        background-color: lightblue;
        animation: changeColor 3s infinite;
      }
    </style>
  </head>
  <body>
    <div class="animated-box">Hover over me!</div>
  </body>
</html>

解釋:

  • @keyframes changeColor 規則定義了動畫,將元素的背景顏色從 lightblue 改變為 lightcoral
  • 在元素 .animated-box 上的 animation 屬性指示動畫 changeColor 應持續 3 秒並無限次重複

6.2 多個關鍵幀

你可以使用多於兩個的關鍵幀來創建更複雜的動畫,定義中間狀態的樣式。

示例:對角線移動並改變顏色

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiple Keyframes Example</title>
    <style>
      @keyframes moveAndChangeColor {
        0% {
          background-color: lightblue;
          transform: translate(0, 0);
        }

        50% {
          background-color: lightgreen;
          transform: translate(100px, 100px);
        }

        100% {
          background-color: lightcoral;
          transform: translate(200px, 0);
        }
      }

      .animated-box {
        width: 200px;
        height: 200px;
        background-color: lightblue;
        animation: moveAndChangeColor 5s infinite;
      }
    </style>
  </head>
  <body>
    <div class="animated-box">Watch me move!</div>
  </body>
</html>

解釋:

@keyframes moveAndChangeColor 規則定義了動畫,將在三個階段改變元素的背景顏色和位置。

  • 在動畫時間的 0% 時,元素顏色為淺藍色,位於初始位置
  • 在動畫時間的 50% 時,元素顏色變為淺綠色,並向右移動 100 像素,向下移動 100 像素
  • 在動畫時間的 100% 時,元素顏色變為淺珊瑚色,並向右移動 200 像素

6.3 簡單動畫示例

示例 1: 脈衝效果

創建一個元素平滑放大和縮小的脈衝效果。

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pulsing Effect</title>
    <style>
      @keyframes pulse {
        0% {
          transform: scale(1);
        }

        50% {
          transform: scale(1.2);
        }

        100% {
          transform: scale(1);
        }
      }

      .pulse-box {
        width: 150px;
        height: 150px;
        background-color: lightpink;
        animation: pulse 2s infinite;
      }
    </style>
  </head>
  <body>
    <div class="pulse-box">Pulsing</div>
  </body>
</html>

解釋:

  • @keyframes pulse 規則定義了動畫,使元素放大到 120%,然後返回到原始大小
  • 在元素 .pulse-box 上的 animation 屬性指示動畫 pulse 應持續 2 秒並無限次重複

示例 2: 旋轉效果

創建元素不斷旋轉的效果:

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rotating Effect</title>
    <style>
      @keyframes rotate {
        from {
          transform: rotate(0deg);
        }

        to {
          transform: rotate(360deg);
        }
      }

      .rotate-box {
        width: 100px;
        height: 100px;
        background-color: lightseagreen;
        animation: rotate 3s infinite linear;
      }
    </style>
  </head>
  <body>
    <div class="rotate-box">Rotating</div>
  </body>
</html>

解釋:

  • @keyframes rotate 規則定義了動畫,將元素從 0 度旋轉到 360 度
  • 在元素 .rotate-box 上的 animation 屬性指示動畫 rotate 應持續 3 秒,無限次重複並以固定速度 (linear) 進行
1
任務
Frontend SELF TW,  等級 24課堂 0
上鎖
移動與顏色
移動與顏色
1
任務
Frontend SELF TW,  等級 24課堂 0
上鎖
脈動
脈動
留言
  • 受歡迎
你必須登入才能留言
此頁面尚無留言