CSS-7: 動畫呈現全解析

2025/03/03 更新2025/03/03 發佈閱讀 8 分鐘

本章節是我們將提到CSS中基本的動畫呈現。透過實作一個月球軌道旋轉效果。

首先，先確定我們在 HTML 中要使用到的元素，分別是地球、軌道和月球，以下是HTML程式碼:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>Moon Orbit</title>
</head>

<body>
  <div class="space">
    <div class="earth"></div>
    <div class="orbit">
      <div class="moon"></div>
    </div>
  </div>
</body>

</html>

好，接著我們為body區塊和space空間設定CSS樣式:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #000;
}
.space {
  width: 200px;
  height: 200px;
  position: relative;  /* 為後續的元素設定參考點以供參考 */
  background-color: #fff;  /* 這行之後可以自行刪掉 */
}

呈現效果:

接著我們設定地球的CSS樣式，他應該置中於space。

.earth {
  width: 100px;
  height: 100px;
  background-color: #0077be;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
}

呈現效果:

這邊你可以發現: 地球並沒有位於中心，這是因為left: 50% 和 top: 50%是相對於父元素的。

所以我們要添加transform: translate(-50%, -50%);這行語句，這裡的 translate 是基於元素自身尺寸的（水平向左偏移 50%，垂直向上偏移 50%）。

.earth {
  width: 100px;
  height: 100px;
  background-color: #0077be;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

呈現效果:

好，接著要為軌道設定CSS樣式:

.orbit {
  background-color: pink;
  z-index: -1;
  width: 200px;
  height: 200px;
  position: absolute;
  transform: translate(-50%, -50%); 
}

這邊我將背景顏色設為粉紅色、z-index 設為 -1 ，讓我們方便觀察效果。

這時候，我們來為月球設定CSS樣式，

.moon {
  width: 30px;
  height: 30px;
  background-color: #c0c0c0;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

呈現效果:

這時候，讀者可以想像將粉紅色方塊一直旋轉時(固定右下角並順時針旋轉)，月球就像是在繞著地球轉動，且保持了一個適當的距離做旋轉。

那我們當然要把旋轉的效果做出來，這時候就需要了解動畫如何運作了。

CSS 動畫分為兩大類：過渡（Transitions） 和 關鍵影格動畫（Keyframes Animation）。以下是詳細介紹：

CSS 過渡允許當元素的屬性值發生變化時，逐步地進行過渡效果。

transition: property duration timing-function delay;

property: 指定要應用過渡效果的屬性（例如：color、background-color、transform）。
duration: 過渡持續時間（例如：1s）。
timing-function: 控制過渡的節奏（例如：ease、linear、ease-in、ease-out）。
delay: 過渡開始的延遲時間（例如：0.5s）。

而另一種就是我現在要使用的，CSS 關鍵影格動畫允許開發者定義多個動畫狀態，並根據時間進行控制，實現複雜的動畫效果。

語法:

@keyframes animation-name {
  0% { /* 起始狀態 */ }
  50% { /* 中間狀態 */ }
  100% { /* 結束狀態 */ }
}

selector {
  animation: animation-name duration timing-function delay iteration-count direction fill-mode;
}

animation-name: 指定動畫名稱。
duration: 動畫持續時間。
timing-function: 動畫速度曲線。
delay: 動畫延遲時間。
iteration-count: 動畫重複次數（如 infinite 表示無限循環）。
direction: 動畫方向（如 normal、reverse）。
fill-mode: 動畫結束後的狀態（如 forwards 保留最後狀態）。

這邊我們直接實作一個簡單的轉動動畫效果 :

定義一個名為orbit的動畫，實現了物體旋轉的效果。

@keyframes orbit {
  0% {
    transform: rotate(0deg) translate(-50%, -50%);
  }
  100% {
    transform: rotate(360deg) translate(-50%, -50%);
  }
}

包括兩個關鍵影格（0% 和 100%）表示動畫的起始和結束狀態。

0%（動畫的起始狀態）：

transform: rotate(0deg): 元素初始旋轉角度為 0度，即沒有旋轉。
translate(-50%, -50%): 讓粉紅色方塊的右下角對齊 space 中心點位置。

100%（動畫的結束狀態）：

transform: rotate(360deg): 元素完成一整圈旋轉（360 度），回到起始角度。
translate(-50%, -50%): 一樣讓粉紅色方塊的右下角對齊 space 中心點位置。

好，最後我們只要再做一步就可以讓動畫運作了，將以下語句插入到 .orbit 選擇器中:

animation: orbit 5s linear infinite;

animation-name: orbit;
- 指定應用的動畫名稱是 orbit，對應前面定義的 @keyframes orbit。
animation-duration: 5s;
- 動畫的執行時間為 5 秒，完成一整圈旋轉。
animation-timing-function: linear;
- 動畫的速度曲線是線性的，即每個時刻的旋轉速度都相同，保持均勻。
animation-iteration-count: infinite;
- 動畫會無限次循環執行。

.orbit {
  background-color: pink; /* 讀者可以自行刪掉這行 */
  z-index: -1; /* 讀者可以自行刪掉這行 */
  width: 200px;
  height: 200px;
  position: absolute;
  transform: translate(-50%, -50%); /* 當動畫開始後讀者可以刪掉這行，這邊只是為了觀察月球是否保持了一個適當的距離 */
  animation: orbit 5s linear infinite; 
}