---
id: css-animations
title: "CSS Animations"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["@keyframes", "animation-name", "animation-duration", "CSS animation", "keyframe animation"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.89
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["css", "web", "frontend", "w3schools", "animation", "keyframes"]
raw_sources: ["https://www.w3schools.com/css/css3_animations.asp"]
applied_in: []
github_commit: ""
---

# [[CSS Animations]]

## 🎯 한 줄 통찰 (One-line insight)
CSS animations let an element gradually change from one style to another using the `@keyframes` rule to define styles at points along the timeline, bound to an element via `animation-name` and `animation-duration`. [S1]

## 🧠 핵심 개념 (Core concepts)
- **What it is** — an animation lets an element gradually change from one style to another. [S1]
- **`@keyframes` rule** — holds the style definitions at specific points during the animation; bind it to an element to make it work. [S1]
- **`animation-name`** — specifies a name for the animation (linking the element to a `@keyframes` block). [S1]
- **`animation-duration`** — defines how long an animation should take to complete; if not specified, no animation occurs because the default value is `0s`. [S1]
- **Keyframe addressing** — keyframes can use `from`/`to` (equivalent to `0%` and `100%`) or explicit percentages. [S1]

## 🧩 추출된 패턴 (Extracted patterns)
- **Define + bind** — declare a `@keyframes` block, then reference it from an element with `animation-name` and give it an `animation-duration`. [S1]
- **`from`/`to` shorthand** — `from { }` and `to { }` are equivalent to `0%` and `100%`. [S1]
- **Multi-stop keyframes** — list intermediate percentages (e.g. `25%`, `50%`, `75%`) to change properties through several stages. [S1]

## 📖 세부 내용 (Details)
**What are CSS Animations?**
An animation lets an element gradually change from one style to another. You can change as many CSS properties you want, as many times as you want. To use CSS animation, you must first specify some keyframes for the animation. Keyframes hold what styles the element will have at certain times. [S1]

**CSS `animation-name` and `animation-duration`**
The `animation-name` property specifies a name for the animation. The `animation-duration` property defines how long an animation should take to complete. If the `animation-duration` property is not specified, no animation will occur, because the default value is `0s` (0 seconds). [S1]

**The `@keyframes` Rule**
When you specify CSS styles inside the `@keyframes` rule, the animation will gradually change from the current style to the new style at certain times. To get an animation to work, you must bind the animation to an element. The following example binds the "myAnimation" animation to the `<div>` element. The animation will last for 4 seconds, and it will gradually change the background-color of the `<div>` element from "red" to "yellow": [S1]
```css
/* The animation code */
@keyframes myAnimation {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: myAnimation;
  animation-duration: 4s;
}
```

**Note:** The animation-duration property defines how long time an animation should take to complete. The `from` and `to` keywords represent 0% (start) and 100% (complete). [S1]

It is also possible to use percent. By using percent, you can add as many style changes as you like. The following example will change the background-color of the `<div>` element when the animation is 25% complete, 50% complete, and again when the animation is 100% complete: [S1]
```css
@keyframes myAnimation {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: myAnimation;
  animation-duration: 4s;
}
```

The following example will change both the background-color and the position of the `<div>` element when the animation is 25% complete, 50% complete, and again when the animation is 100% complete: [S1]
```css
@keyframes myAnimation {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: myAnimation;
  animation-duration: 4s;
}
```

## 🛠️ 적용 사례 (Applied in summary)
The page applies `@keyframes` animations to a `<div>`: a two-stop color change (red → yellow), a four-stop color sequence, and a combined color-plus-position move using `left`/`top` with `position: relative`. No external project/commit applications found in the source.

## 💻 코드 패턴 (Code patterns)
Define keyframes and bind to an element (language: CSS):
```css
@keyframes myAnimation {
  from {background-color: red;}
  to {background-color: yellow;}
}

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: myAnimation;
  animation-duration: 4s;
}
```
Percentage-based multi-stop keyframes:
```css
@keyframes myAnimation {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
```

## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source.

## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.89
- **중복 검사 결과:** 신규 생성 (New discovery)

## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Animation Timing]], [[CSS Animation Properties]], [[CSS Transitions]]
- **참조 맥락:** The foundation of keyframe-based animation; the timing and shorthand controls extend these basics.

## 📚 출처 (Sources)
- [S1] W3Schools — CSS Animations — https://www.w3schools.com/css/css3_animations.asp

## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Animations" page (Astra wiki-curation, P-Reinforce v3.1 format).