---
id: wiki-2026-0508-css-애니메이션-최적화-optimizing-css-ani
title: CSS 애니메이션 최적화 (Optimizing CSS Animations)
category: 10_Wiki/Topics
status: duplicate
canonical_id: wiki-2026-0508-css-animations
duplicate_of: "[[CSS Animations]]"
aliases: [CSS animation optimization, GPU acceleration, will-change, reflow repaint]
source_trust_level: A
confidence_score: 0.92
verification_status: redirected
tags: [duplicate, css, animation, performance, gpu]
last_reinforced: 2026-05-10
github_commit: pending
---

# CSS 애니메이션 최적화

> **이 문서는 [[CSS Animations]] 의 specialization 입니다.** Canonical 문서로 redirect.

## 핵심 요약

- 매 layout property (width, height, top, left) 의 animate 의 X — 매 reflow.
- 매 `transform` + `opacity` 만 의 use — 매 GPU composite layer.
- 매 `will-change` 의 hint, 매 overuse X.
- 매 `prefers-reduced-motion` 의 accessibility.
- 매 modern: View Transitions API, scroll-driven animation.

## 🔗 Graph
- 부모: [[CSS Animations]] (canonical)
- Adjacent: [[Web-Performance]] · [[Accessibility]] · [[Baseline (Web Platform Features)]] · [[GPU-Acceleration]]

## 🕓 변경 이력
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | 중복 처리 — CSS Animations 의 specialization 으로 redirect |