昨天我們拿到「空間控制權」：能決定誰在上、誰在下。
但網頁還是靜態的，沒有動態感。想像一下：

• 彈出視窗直接瞬間跳出來 → 有點生硬
• 下拉選單硬生生地展開 → 缺少流暢度
• 按鈕點下去只換顏色 → 少了一點「按壓感」

這時候，就輪到 transition / transform / animation 出場啦~
這些之前也有弄到，現在來細細說說.....

1. 過渡效果：transition

transition 可以幫屬性的改變「加上動畫」
HTML：

<button class="btn">Hover 我！</button>

CSS：

.btn {
  padding: 10px 20px;
  background: #74c0fc;
  border: none;
  border-radius: 8px;
  transition: all 0.3s ease; /* 加上過渡效果 */
}

.btn:hover {
  background: #4dabf7;
  transform: scale(1.1); /* 放大一點 */
}

效果：滑鼠移上去，按鈕會慢慢變色、微微放大，更有互動感
( ～'ω')～( ～'ω')～( ～'ω')～( ～'ω')～( ～'ω')～( ～'ω')～( ～'ω')～

2. 變形效果：transform

可以用來移動、縮放、旋轉、傾斜

.box {
  width: 100px; height: 100px;
  background: #ffd6a5;
  transition: transform 0.5s ease;
}

.box:hover {
  transform: rotate(15deg) scale(1.2); /* 旋轉+放大 */
}

3. 簡單動畫：@keyframes

如果想要「自動動起來」（不用 hover 觸發），就用 animation

@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}

.ball {
  width: 50px; height: 50px;
  background: #ffafcc;
  border-radius: 50%;
  animation: float 2s infinite ease-in-out;
}

4. 小技巧

• Modal 彈出 → 加 scale 或 opacity，讓它從小到大浮現
• Navbar → 滾動時加 transition: background 0.3s;，滑順切換背景色
• Button → 加 box-shadow 的過渡，讓「按下去」有凹陷感

學習心得

一開始我以為「動畫」很難，要寫一堆 JS 才能做。
結果發現，CSS 自帶的 transition 和 transform 就超強了！

• hover 不再只有顏色變化，而是有縮放、旋轉，手感大升級~
• 下拉選單 / 彈窗出現時，畫面變得自然，不再突兀
• 用 @keyframes 還能做循環動畫，讓畫面有「呼吸感」
  

學完 position + z-index + transition，都產生有種自己能做出真實的 UI 效果，不只是靜態排版的錯覺了。゜+.(人-ω◕)゜+.゜