---
id: wiki-2026-0508-애니메이션-transition-keyframes
title: 애니메이션 (transition / keyframes)
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [CSS Animation, transition, keyframes, CSS Motion]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [css, animation, frontend, performance, ux]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: css
  framework: css-web-animations
---

# 애니메이션 (transition / keyframes)

## 매 한 줄
> **"매 transition은 state-to-state, keyframes는 timeline"**. CSS transition 은 두 state 사이의 보간, @keyframes 는 임의 시간축의 multi-step 애니메이션. 2026 기준 `view-transition-name`, `@scroll-timeline`, `linear()` easing 까지 native 지원되어 JS 의존도 가 급격히 감소.

## 매 핵심

### 매 transition
- 4 properties: `property` · `duration` · `timing-function` · `delay`.
- pseudo `:hover`, `:focus`, class toggle 등 state change 가 trigger.
- shorthand: `transition: all 200ms ease-out 0s`.
- **합성 가능 property** (transform/opacity) 만 60fps 안정적.

### 매 @keyframes
- timeline-based: `0%`, `50%`, `100%` 또는 `from`/`to`.
- 적용: `animation: name duration timing iteration direction fill-mode`.
- `animation-fill-mode: forwards` — 종료 상태 유지.
- `animation-composition: add` (2026 widely supported) — multiple animations 결합.

### 매 응용
1. UI feedback — button press, modal enter.
2. Loading indicator — spinner, skeleton shimmer.
3. View Transition API — page navigation morph.

## 💻 패턴

### Transition 기본
```css
.btn {
  background: #3b82f6;
  transform: scale(1);
  transition: transform 150ms cubic-bezier(.2,.8,.2,1),
              background 150ms ease-out;
}
.btn:hover { background: #2563eb; transform: scale(1.04); }
.btn:active { transform: scale(0.97); }
```

### Keyframes — shimmer loading
```css
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.skeleton {
  background: linear-gradient(90deg,#eee 25%,#ddd 50%,#eee 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
```

### Spring-like easing (linear() 함수, 2024+)
```css
.modal {
  transition: transform 600ms linear(
    0, 0.5 25%, 1.05 50%, 0.95 70%, 1.02 85%, 1
  );
}
```

### View Transition API (chrome 111+, safari 18+)
```css
::view-transition-old(card) { animation: 200ms ease-out fade-out; }
::view-transition-new(card) { animation: 300ms ease-in fade-in; }

@keyframes fade-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes fade-in  { from { opacity: 0; transform: translateY(12px); } }

.card { view-transition-name: card; }
```
```js
document.startViewTransition(() => updateDOM());
```

### Scroll-driven animation (`@scroll-timeline`)
```css
@keyframes parallax { from { translate: 0 0; } to { translate: 0 -50%; } }
.hero {
  animation: parallax linear;
  animation-timeline: scroll(root);
  animation-range: 0 100vh;
}
```

### Reduced motion 대응 (필수)
```css
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}
```

### 60fps-safe transform
```css
/* GOOD: composited */
.card { transition: transform 200ms, opacity 200ms; }

/* BAD: layout thrash */
.card-bad { transition: width 200ms, top 200ms, left 200ms; }
```

## 매 결정 기준
| 상황 | Approach |
|---|---|
| state 두 개 사이 보간 | `transition`. |
| 다단계 / 무한 루프 | `@keyframes` + `animation`. |
| 페이지 navigation 모핑 | View Transition API. |
| 스크롤 동기화 | `animation-timeline: scroll()`. |
| JS-driven 복잡 | Web Animations API (`element.animate(...)`). |

**기본값**: transform/opacity only · ease-out 150-300ms · `prefers-reduced-motion` 대응.

## 🔗 Graph
- 부모: [[Web-Frontend]]
- 변형: [[Web-Animations-API]]
- 응용: [[Microinteractions]]
- Adjacent: [[prefers-reduced-motion]]

## 🤖 LLM 활용
**언제**: CSS animation 코드 작성, easing curve tuning, View Transition migration.
**언제 X**: physics-heavy (cloth, particle) — JS/WebGL 영역.

## ❌ 안티패턴
- **`transition: all`**: 의도치 않은 property 까지 animate → flicker.
- **`top`/`left` 애니메이션**: layout 재계산 → 30fps 미만.
- **`prefers-reduced-motion` 무시**: 접근성 위반 (vestibular disorder 위험).
- **무한 spinner without `aria-busy`**: SR 사용자에게 정보 X.

## 🧪 검증 / 중복
- Verified (CSS Animations Level 1, View Transitions Level 2 spec).
- 신뢰도 A — W3C standards.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — CSS animation transition/keyframes |
