昨天我們已經看過動畫的一些方法：速度曲線、變形原點、3D 效果、效能心法。
今天我們不急著學新招，而是先整理一下：到底什麼動畫該怎麼寫，效果會最好？

想像你是一位導演，按鈕、選單、彈窗就是演員。
他們不能只會「瞬間出現」或「硬生生移動」，要會「入場、退場、互動」這三件事
(・ε・)

1. 入場動畫

先小/淡，再長大/清晰

<div class="overlay">
  <div class="modal">內容內容</div>
</div>

.overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  display:grid; place-items:center;
  opacity: 0; pointer-events: none;
  transition: opacity 220ms ease-out;
}
.overlay.show { opacity: 1; pointer-events: auto; }

.modal {
  width: 320px; padding: 20px; border-radius: 12px; background: #fff;
  transform: scale(.9); opacity: 0;
  transition: transform 220ms ease-out, opacity 220ms ease-out;
}
.overlay.show .modal { transform: scale(1); opacity: 1; }

✧ 感覺：Modal 彈出是「慢慢浮現」✧

2. 互動動畫：跟手感有關

互動 ≠ 亂動，重點是「回饋」

.btn {
  padding: 10px 20px;
  background: #74c0fc; color: #fff;
  border: none; border-radius: 8px;
  transition: transform 150ms ease-out, background 200ms ease-out;
}
.btn:hover { transform: scale(1.08); background: #4dabf7; }
.btn:active { transform: scale(.95); }

✧ 小小 hover 放大，按下去縮一點。就像真實按鈕一樣有壓感 ✧

3. 退場動畫：怎麼優雅離開？

動畫不只進場，退場也很重要。
最常見 → display:none 沒有過渡，直接消失

✔ 也可以試試：先加 class 讓它「淡掉/縮回去」，動畫完畢再用 JS 移除 DOM

.toast {
  background: #333; color: #fff;
  padding: 10px 16px; border-radius: 8px;
  position: fixed; bottom: 20px; right: 20px;
  opacity: 0; transform: translateY(20px);
  transition: transform 250ms ease, opacity 250ms ease;
}
.toast.show {
  opacity: 1; transform: translateY(0);
}
.toast.hide {
  opacity: 0; transform: translateY(20px);
}

✧ 出場＝滑上來並淡入，退場＝淡出並滑下去，流程完整 ✧

4. 挑選適宜的工具

哪些動畫可以用？

• 位置 / 移動 → transform: translate（不卡）
• 放大縮小 → scale
• 旋轉 → rotate
• 透明度 → opacity
• 高度/寬度 → 避免，必要時用 max-height trick

速度曲線怎麼選？

• 小互動 → ease-out 150~200ms
• Modal / Drawer → ease-in-out 220~320ms
• 彈跳 / 活潑 → cubic-bezier(.22,1,.36,1)

5. 小練習：做一個「Toast 通知」

想像右下角彈出提示 → 2 秒後自己淡出

<div class="toast show">已成功儲存！</div>

.toast {
  background:#333; color:#fff;
  padding:10px 16px; border-radius:8px;
  position:fixed; bottom:20px; right:20px;
  opacity:0; transform:translateY(20px);
  transition: transform 300ms ease, opacity 300ms ease;
}
.toast.show { opacity:1; transform:translateY(0); }
.toast.hide { opacity:0; transform:translateY(20px); }

學習心得

• 不是所有動畫都好用 → 位置/大小別亂動，translate/opacity 才順暢
• 動畫要有「出場、互動、退場」三段，整體互動會更完整
• 速度曲線改一點就差很多