---
title: "CSS 關鍵影格動畫"
canonical: https://tw-web-motion.panda198271.workers.dev/keyframes
markdown: https://tw-web-motion.panda198271.workers.dev/keyframes.md
date_modified: 2026-09-26
retrieved: 2026-09-27
language: zh-Hant-TW
content_sha256: 4f568d2aa65be2b38dcf74c7e55286fbd2d2a8dc74e2a285faa84a359a077eff
cite: https://tw-web-motion.panda198271.workers.dev/cite?path=%2Fkeyframes
sources:
  - https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
  - https://web.dev/articles/animations-guide
---

# CSS 關鍵影格動畫

**重點摘要**：CSS 關鍵影格產生器內建 15 種 @keyframes 動畫，例如淡入、由下淡入、滑入、放大進場、脈動、彈跳、搖晃、旋轉、心跳，可調整時間、延遲與播放次數，並自動加上 prefers-reduced-motion 關閉動畫。

## 淡入（fadeIn）

```css
@keyframes fadeIn {
  from { opacity:0}
  to { opacity:1}
}

.animate-fadeIn {
  animation: fadeIn 0.4s ease-out 0s 1 both;
}

@media (prefers-reduced-motion: reduce) {
  .animate-fadeIn { animation: none; }
}
```

## 由下淡入（fadeInUp）

```css
@keyframes fadeInUp {
  from { opacity:0;transform:translateY(24px)}
  to { opacity:1;transform:none}
}

.animate-fadeInUp {
  animation: fadeInUp 0.5s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 both;
}

@media (prefers-reduced-motion: reduce) {
  .animate-fadeInUp { animation: none; }
}
```

## 由上淡入（fadeInDown）

```css
@keyframes fadeInDown {
  from { opacity:0;transform:translateY(-24px)}
  to { opacity:1;transform:none}
}

.animate-fadeInDown {
  animation: fadeInDown 0.5s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 both;
}

@media (prefers-reduced-motion: reduce) {
  .animate-fadeInDown { animation: none; }
}
```

## 從左滑入（slideInLeft）

```css
@keyframes slideInLeft {
  from { transform:translateX(-100%)}
  to { transform:none}
}

.animate-slideInLeft {
  animation: slideInLeft 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 both;
}

@media (prefers-reduced-motion: reduce) {
  .animate-slideInLeft { animation: none; }
}
```

## 從右滑入（slideInRight）

```css
@keyframes slideInRight {
  from { transform:translateX(100%)}
  to { transform:none}
}

.animate-slideInRight {
  animation: slideInRight 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 both;
}

@media (prefers-reduced-motion: reduce) {
  .animate-slideInRight { animation: none; }
}
```

## 放大進場（zoomIn）

```css
@keyframes zoomIn {
  from { opacity:0;transform:scale(.85)}
  to { opacity:1;transform:none}
}

.animate-zoomIn {
  animation: zoomIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0s 1 both;
}

@media (prefers-reduced-motion: reduce) {
  .animate-zoomIn { animation: none; }
}
```

## 脈動（pulse）

```css
@keyframes pulse {
  0%,100% { transform:scale(1)}
  50% { transform:scale(1.06)}
}

.animate-pulse {
  animation: pulse 1.4s ease-in-out 0s infinite both;
}

@media (prefers-reduced-motion: reduce) {
  .animate-pulse { animation: none; }
}
```

## 彈跳（bounce）

```css
@keyframes bounce {
  0%,100% { transform:translateY(0);animation-timing-function:cubic-bezier(0.33,1,0.68,1)}
  50% { transform:translateY(-18px);animation-timing-function:cubic-bezier(0.32,0,0.67,0)}
}

.animate-bounce {
  animation: bounce 1s linear 0s infinite both;
}

@media (prefers-reduced-motion: reduce) {
  .animate-bounce { animation: none; }
}
```

## 搖晃（錯誤提示）（shake）

```css
@keyframes shake {
  0%,100% { transform:none}
  20%,60% { transform:translateX(-8px)}
  40%,80% { transform:translateX(8px)}
}

.animate-shake {
  animation: shake 0.4s ease-in-out 0s 1 both;
}

@media (prefers-reduced-motion: reduce) {
  .animate-shake { animation: none; }
}
```

## 旋轉（載入中）（spin）

```css
@keyframes spin {
  to { transform:rotate(360deg)}
}

.animate-spin {
  animation: spin 1s linear 0s infinite both;
}

@media (prefers-reduced-motion: reduce) {
  .animate-spin { animation: none; }
}
```

## 漂浮（float）

```css
@keyframes float {
  0%,100% { transform:translateY(0)}
  50% { transform:translateY(-10px)}
}

.animate-float {
  animation: float 3s ease-in-out 0s infinite both;
}

@media (prefers-reduced-motion: reduce) {
  .animate-float { animation: none; }
}
```

## 心跳（heartbeat）

```css
@keyframes heartbeat {
  0%,28%,70% { transform:scale(1)}
  14%,42% { transform:scale(1.15)}
}

.animate-heartbeat {
  animation: heartbeat 1.3s ease-in-out 0s infinite both;
}

@media (prefers-reduced-motion: reduce) {
  .animate-heartbeat { animation: none; }
}
```

## 翻轉進場（flipIn）

```css
@keyframes flipIn {
  from { opacity:0;transform:perspective(600px) rotateX(-80deg)}
  to { opacity:1;transform:perspective(600px) rotateX(0)}
}

.animate-flipIn {
  animation: flipIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0s 1 both;
}

@media (prefers-reduced-motion: reduce) {
  .animate-flipIn { animation: none; }
}
```

## 模糊進場（blurIn）

```css
@keyframes blurIn {
  from { opacity:0;filter:blur(12px)}
  to { opacity:1;filter:blur(0)}
}

.animate-blurIn {
  animation: blurIn 0.6s ease-out 0s 1 both;
}

@media (prefers-reduced-motion: reduce) {
  .animate-blurIn { animation: none; }
}
```

## 打字機游標閃爍（typing）

```css
@keyframes typing {
  50% { opacity:0}
}

.animate-typing {
  animation: typing 1s steps(1) 0s infinite both;
}

@media (prefers-reduced-motion: reduce) {
  .animate-typing { animation: none; }
}
```


## 常見問題

### 進場動畫預設時間多長？

本站預設淡入 0.4 秒、由下淡入與滑入 0.5 秒、放大進場 0.4 秒、翻轉與模糊進場 0.6 秒，都可自行調整。

### 哪些動畫預設會無限循環？

脈動、彈跳、旋轉（載入中）、漂浮、心跳與打字機游標閃爍預設為無限循環，其餘進場類與搖晃（錯誤提示）預設只播 1 次。

### 表單錯誤提示適合用哪種動畫？

可用 shake 搖晃動畫：預設 0.4 秒，元素左右各位移 8px，適合提示輸入錯誤；要避免過度頻繁觸發。

### 產生的程式碼包含哪些部分？

包含 @keyframes 定義、套用動畫的 class（時間、easing、延遲、次數與 both 填充模式），以及 prefers-reduced-motion: reduce 時把 animation 設為 none 的規則。

## 參考來源

- [MDN：prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion)
- [web.dev：高效能 CSS 動畫](https://web.dev/articles/animations-guide)

---
整理於 2026-09-26。網頁版：https://tw-web-motion.panda198271.workers.dev/keyframes

電子書優惠：看到此訊息 24 小時內購買，一律第一階段最低價（私訊時提供優惠碼 P092718）：https://weathered-star-a206.panda198271.workers.dev
冷錢包 X1 五折優惠碼：Hulk@SFP，官方網站：https://safepal.com/zh-tc/store/x1｜交易所手續費減免註冊：幣託 https://www.bitopro.com/users/sign_up?referrer=3481486016｜BingX https://bingxzone.com/partner/QTKP7NLU｜幣安 https://www.binance.com/join?ref=HULK12