動畫範例 8 種 + 中文觸發詞 · motion-design 範例集

1 卡片進場（Premium）

觸發詞：卡片進場 / 淡入 / 主元素入場 pattern: card entrance + premium archetype 用在：hero 卡 / 主視覺進場

主元素

/* CSS — 30px 下方淡入 / 600ms / Material Design 3 standard easing */
.card {
  animation: cardEntrance 600ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 0;
  transform: translateY(30px);
}
@keyframes cardEntrance {
  to { opacity: 1; transform: translateY(0); }
}

2 多卡依序進（Stagger）

觸發詞：依序進場 / stagger / 排隊進場 / 多卡進場 pattern: multi-element choreography + 80ms stagger 用在：商品 grid / 戰隊員照片 / dashboard 卡

卡 1

卡 2

卡 3

卡 4

/* CSS — 4 卡 80ms 依序 / MD3 emphasized easing */
.mini-card {
  animation: cardEntrance 400ms cubic-bezier(0.05, 0.7, 0.1, 1) forwards;
  opacity: 0;
  transform: translateY(20px);
}
.mini-card:nth-child(1) { animation-delay: 0ms; }
.mini-card:nth-child(2) { animation-delay: 80ms; }
.mini-card:nth-child(3) { animation-delay: 160ms; }
.mini-card:nth-child(4) { animation-delay: 240ms; }

3 成功打勾（Success Pop）

觸發詞：成功打勾 / 完成回饋 / success 動畫 pattern: success state + bounce-settle ease + 400ms 用在：表單送出成功 / 加入購物車 / 完成步驟

✓

/* CSS — scale 0.3→1.15→1 / overshoot 15% / 400ms */
.check {
  animation: successPop 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes successPop {
  0%   { opacity: 0; transform: scale(0.3); }
  60%  { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}

4 錯誤抖動（Error Shake）

觸發詞：錯誤抖動 / 表單驗證錯 / error 震動 pattern: error feedback + 2-3 oscillation ±10px 用在：表單欄位驗證失敗 / 密碼錯 / 登入錯

❌ 密碼錯誤

/* CSS — 5 次水平振盪 / ±10px / 350ms */
.err-box {
  animation: errorShake 350ms ease-in-out;
}
@keyframes errorShake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
  20%, 40%, 60%, 80% { transform: translateX(10px); }
}

5 載入動畫（Spinner + Skeleton）

觸發詞：載入動畫 / loading / skeleton 占位 pattern: ambient loading + infinite linear/sine 用在：API 請求中 / 內容載入中 / 圖片載入

/* CSS — spinner 800ms linear infinite */
.spinner {
  width: 40px; height: 40px;
  border: 4px solid #ffe4ee;
  border-top-color: #ff5a8a;
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* skeleton shimmer 1.4s ease-in-out infinite */
.skeleton {
  background: linear-gradient(90deg, #eee 0%, #f5f5f5 50%, #eee 100%);
  background-size: 200% 100%;
  animation: skeleton 1.4s ease-in-out infinite;
}
@keyframes skeleton {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

6 呼吸 pulse（Ambient）

觸發詞：呼吸 / pulse / 脈動 / 注意吸引 pattern: ambient breathing + sine ease + 2.4s loop 用在：CTA 鈕引導注意 / 通知未讀 / live 中

/* CSS — scale 1→1.08 + 光暈擴散 / 2.4s 無限循環 */
.breath {
  animation: breathing 2.4s ease-in-out infinite;
}
@keyframes breathing {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255,90,138,0.4);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 0 20px rgba(255,90,138,0);
  }
}

7 按鈕回饋（Hover + Press）

觸發詞：按鈕回饋 / hover lift / 按下回彈 pattern: button press + anticipation/squash + 120ms 用在：所有 CTA / 提交鈕 / 加入購物車

/* CSS — hover 上浮 + press 縮放 / 120ms snappy */
.pressbtn {
  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
  box-shadow: 0 4px 12px rgba(255,90,138,0.3);
}
.pressbtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255,90,138,0.4);
}
.pressbtn:active {
  transform: scale(0.96);
  box-shadow: 0 1px 4px rgba(255,90,138,0.2);
}

8 愛心點擊（Like Burst）

觸發詞：愛心點擊 / like 動畫 / 收藏粒子 pattern: micro-interaction + scale pop + particle 用在：FB/IG 按讚 / 收藏 / 點愛心

♥

點愛心試試

/* CSS — 點擊變色 + scale pop + 2 粒子斜飛 */
.heart.liked {
  color: #ff5a8a;
  animation: heartPop 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes heartPop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.4); }
  60%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}
/* 粒子用 ::before / ::after 兩顆斜飛 */

8 種動畫範例 + 中文觸發詞