為什麼要學動畫？

動畫能讓網頁更有互動感，提升使用者體驗。常見應用：

• 按鈕 hover 效果
• 頁面載入動畫
• Modal 彈窗淡入淡出
• 滑動選單

1. 過渡 (Transition)

transition 可以讓屬性在變化時「平滑過渡」。

語法

transition: [property] [duration] [timing-function] [delay];

• property：要套用過渡的屬性（例：color、background、all）
• duration：動畫時間（例：0.3s、1s）
• timing-function：加速度函式
  • ease（預設，慢-快-慢）
  • linear（均速）
  • ease-in（慢開始）
  • ease-out（慢結束）
  • cubic-bezier()（自定義）
• delay：延遲時間

範例：按鈕 hover 效果

<button class="btn">Hover Me</button>

.btn {
  background: #4cafef;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
}

.btn:hover {
  background: #357ab7;
  transform: scale(1.05);
}

2. 動畫 (Animation)

@keyframes 可以定義一個動畫，並透過 animation 屬性呼叫。

語法

@keyframes animationName {
  0% { ... }
  50% { ... }
  100% { ... }
}

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

範例：淡入動畫

<div class="fade">Hello World</div>

.fade {
  opacity: 0;
  animation: fadeIn 2s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

3. 結合 Transition + Animation

• Transition → 適合「互動事件」(hover、click)
• Animation → 適合「持續或載入效果」

範例：滑入卡片

<div class="card">I am a card</div>

.card {
  width: 200px;
  height: 120px;
  background: #6a5acd;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  transform: translateY(50px);
  opacity: 0;
  animation: slideUp 1s ease-out forwards;
}

@keyframes slideUp {
  0% { transform: translateY(50px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

小練習 💡

1. 做一個按鈕 hover + 按下去縮小的效果。
2. 做一個頁面載入時淡入的整頁背景。
3. 嘗試做一個無限旋轉的 Loading Spinner。

👉 明天（Day 11），我們會進入JavaScript 入門：變數與資料型態，開始為網頁加上互動邏輯。