今天是學習CSS的最後一天！
我們就來學習讓網頁從「靜態」變成「動態」，用簡單的動畫與過渡效果，讓畫面更有互動感！

1. transition（過渡效果）

transition 可以讓樣式的變化「平滑」進行，而不是瞬間切換。

語法：

.element {
  transition: 屬性 時間 效果;
}

• 屬性：想要套用的 CSS 屬性（如 color、background、transform）
• 時間：動畫持續多久（如 0.3s、1s）
• 效果：速度曲線（ease、linear、ease-in、ease-out…）

範例：滑鼠移上去變色

button {
  background: lightblue;
  transition: background 0.3s ease;
}

button:hover {
  background: deepskyblue;
}

移上去的時候，顏色會慢慢變化，而不是瞬間跳色。

2. transform（變形效果）

transform 可以改變元素的 大小、角度、位置。

常見用法：
• scale(1.2) → 放大 1.2 倍
• rotate(45deg) → 旋轉 45 度
• translateX(50px) → 向右移動 50px
• translateY(-20px) → 向上移動 20px

範例：卡片放大效果

.card {
  transition: transform 0.3s ease;
}

.card:hover {
  transform: scale(1.1);
}

移上去的時候卡片會放大，常用在 卡片、按鈕效果。

3. animation + @keyframes（動畫）

如果要讓效果「自動播放、循環」，就用 @keyframes。

語法：

@keyframes 動畫名稱 {
  0% { 樣式1 }
  50% { 樣式2 }
  100% { 樣式3 }
}

.element {
  animation: 動畫名稱 時間 速度曲線 次數;
}

範例：呼吸感的 loading 動畫

@keyframes loading {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.5); }
  100% { transform: scale(1); }
}

.circle {
  width: 20px;
  height: 20px;
  background: deepskyblue;
  border-radius: 50%;
  animation: loading 1s infinite ease-in-out;
}

小圓圈會一縮一放，看起來像呼吸一樣。

4. 🎯 今日實戰

(1) Hover 卡片效果

滑鼠移上去 → 卡片微微放大 + 陰影變濃

.card {
  width: 200px;
  padding: 20px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

(2) 三個小點 Loading 動畫

三個小圓點輪流跳動，看起來像打字或 loading

@keyframes bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

.dot {
  width: 15px;
  height: 15px;
  margin: 5px;
  background: deepskyblue;
  border-radius: 50%;
  display: inline-block;
  animation: bounce 1.4s infinite ease-in-out;
}

.dot:nth-child(2) {
  animation-delay: -0.3s;
}
.dot:nth-child(3) {
  animation-delay: -0.6s;
}

很常出現在「聊天訊息、載入等待」的畫面。

✅今日小結

• transition → 讓樣式變化更平滑
• transform → 縮放、旋轉、移動元素
• animation + @keyframes → 做循環或自動播放的動畫
• 實戰 → 卡片 hover 效果、Loading 動畫

恭喜大家！本周7天CSS學習進度完成啦~
你已經學會從 靜態 → 響應式 → 動態 的完整網頁基礎啦！

我們來複習一下本周的CSS學習內容吧

Day 8：CSS 基礎
認識 CSS、選擇器、樣式寫法、三種引用方式
Day 9：文字、顏色、背景
字體、字級、單位、顏色表示法
Day 10：盒模型 (Box Model)
Content、Padding、Border、Margin、元素間距
Day 11：Flexbox 排版
彈性盒子、主軸/交叉軸對齊、彈性換行
Day 12：Grid 網格
版面切割、欄與列的設定、grid-area 控制
Day 13：RWD 響應式設計
Viewport、相對單位 (%、em、rem、vh、vw)、Media Queries
Day 14：動畫與過渡
transition、transform、@keyframes、hover 動態效果

恭喜各位現在已經習得HTML、CSS的基本技能，就像蓋房子有了地基和外觀。
接下來，我們要學會讓房子「動起來」
我們繼續往下個技能JS(JavaScript)邁進吧！
敬請期待下周的JS學習內容
我是Ting，，下周見吧~😍