docs(10_Wiki): Dev 폴더 누락분 반영 — Topic_Programming으로 통합
이전 재구성 작업에서 Dev/ 폴더가 누락되었던 것을 반영. - Dev/Topic_Programming(중첩 폴더, 78개)은 Dev 자체 최상위 폴더들 (Architecture/Conventions/Engineering_Intelligence 등)과 완전 중복이라 제거. - Dev 최상위 엔지니어링 지식 폴더(Architecture/Conventions/Engineering_Intelligence/ Failure_Library/Generalized_Principles/Language/Pattern_Catalog/Platform_Guides/ Subsystems, 77개)는 이미 Topic_Programming/Topic_Programming에 더 최신 버전이 존재해 중복 제거(고유 콘텐츠 1개는 예외 처리하여 이동 보존). - Dev의 W3Schools 언어 튜토리얼 폴더(Topic_C/CPP/CSS/CSharp/HOWTO/HTML/Java/ JavaScript/PHP/Python/SQL/W3CSS, 1201개)는 전부 Topic_Programming 하위로 이동. - 에이전트 운영 상태(.astra/docs)는 그대로 유지, 콘텐츠 폴더만 정리. - Topic_Programming 최종 문서 수: 2784 → 3985.
This commit is contained in:
Antigravity Agent
@@ -0,0 +1,153 @@
|
||||
---
|
||||
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).
|
||||
Reference in New Issue
Block a user