docs(10_Wiki): W3Schools 위키화 — HTML/CSS/JavaScript(core)

W3Schools 튜토리얼을 P-Reinforce v3.1 포맷으로 위키화(영어 본문, 한/영 섹션 헤더).
- Topic_HTML: 59문서 (튜토리얼+예제, 레퍼런스/메타 제외)
- Topic_CSS: 190문서 (메인 + Advanced/Flexbox/Grid/RWD 전체)
- Topic_JavaScript: 120문서 (코어 언어; Temporal/DOM상세/BOM/WebAPI/AJAX/jQuery/Graphics 등은 후속)
각 폴더 00_INDEX.md(MOC) 포함. 코드 verbatim, 미확인분은 "Not found in source" 표기.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

10_Wiki/Topic_CSS/CSS_Transitions_Timing.md

@@ -0,0 +1,153 @@
+---
+id: css-transition-timing
+title: "CSS Transition Timing"
+category: "Frontend"
+status: "draft"
+verification_status: "conceptual"
+canonical_id: ""
+aliases: ["transition-timing-function", "transition-delay", "speed curve", "ease", "cubic-bezier", "transition shorthand"]
+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", "transition", "timing-function", "animation"]
+raw_sources: ["https://www.w3schools.com/css/css3_transitions_timing.asp"]
+applied_in: []
+github_commit: ""
+---
+
+# [[CSS Transition Timing]]
+
+## 🎯 한 줄 통찰 (One-line insight)
+The `transition-timing-function` property sets the speed curve of a transition, `transition-delay` postpones its start, and the `transition` shorthand combines property, duration, timing-function, and delay into one declaration. [S1]
+
+## 🧠 핵심 개념 (Core concepts)
+- **`transition-timing-function`** — specifies the speed curve of the transition effect. [S1]
+- **`transition-delay`** — introduces a waiting period (in seconds or milliseconds) before the transition begins. [S1]
+- **Transition + transform** — the `transform` property can be transitioned alongside other properties for combined effects. [S1]
+- **Two ways to declare** — set the four individual `transition-*` properties separately, or collapse them into the `transition` shorthand. [S1]
+
+## 🧩 추출된 패턴 (Extracted patterns)
+- **Speed-curve selection** — choose among `ease`, `linear`, `ease-in`, `ease-out`, `ease-in-out`, or a custom `cubic-bezier(n,n,n,n)`. [S1]
+- **Delayed start** — `transition-delay: 1s;` waits before the visible change begins. [S1]
+- **Shorthand ordering** — `transition: width 2s linear 1s;` corresponds to property, duration, timing-function, delay. [S1]
+
+## 📖 세부 내용 (Details)
+**The Speed Curve of the Transition**
+The `transition-timing-function` property specifies the speed curve of the transition effect. The `transition-timing-function` property can have the following values: [S1]
+- `ease` — specifies a transition effect with a slow start, then fast, then end slowly (this is default). [S1]
+- `linear` — specifies a transition effect with the same speed from start to end. [S1]
+- `ease-in` — specifies a transition effect with a slow start. [S1]
+- `ease-out` — specifies a transition effect with a slow end. [S1]
+- `ease-in-out` — specifies a transition effect with a slow start and end. [S1]
+- `cubic-bezier(n,n,n,n)` — lets you define your own values in a cubic-bezier function. [S1]
+
+The following example shows the different speed curves applied to several elements: [S1]
+```css
+#div1 {transition-timing-function: linear;}
+#div2 {transition-timing-function: ease;}
+#div3 {transition-timing-function: ease-in;}
+#div4 {transition-timing-function: ease-out;}
+#div5 {transition-timing-function: ease-in-out;}
+```
+
+**Delay the Transition Effect**
+The `transition-delay` property specifies a delay (in seconds) for the transition effect. The following example has a 1 second delay before starting: [S1]
+```css
+div {
+  transition-delay: 1s;
+}
+```
+
+**Transition + Transformation**
+The following example adds a transition effect to the transformation: [S1]
+```css
+div {
+  transition: width 2s, height 2s, background-color 2s, transform 2s;
+}
+```
+A further example transitions both background-color and transform on a button: [S1]
+```css
+button {
+  transition: background-color 1s ease-out, transform 1s ease-out;
+}
+```
+
+**More Transition Examples**
+The CSS transition properties can be specified one by one, like this: [S1]
+```css
+div {
+  transition-property: width;
+  transition-duration: 2s;
+  transition-timing-function: linear;
+  transition-delay: 1s;
+}
+```
+Or by using the shorthand property `transition`: [S1]
+```css
+div {
+  transition: width 2s linear 1s;
+}
+```
+
+**CSS Transition Properties**
+The following table lists the CSS transition properties: [S1]
+
+| Property | Description |
+|----------|-------------|
+| `transition` | A shorthand property for setting the four transition properties into a single property |
+| `transition-delay` | Specifies a delay (in seconds) for the transition effect |
+| `transition-duration` | Specifies how many seconds or milliseconds a transition effect takes to complete |
+| `transition-property` | Specifies the name of the CSS property the transition effect is for |
+| `transition-timing-function` | Specifies the speed curve of the transition effect |
+
+## 🛠️ 적용 사례 (Applied in summary)
+The page applies different timing functions to `#div1`–`#div5`, a 1-second delay to a `<div>`, and combined transitions of size/color/transform on a `<div>` and a `button`. It also shows the individual-property and shorthand forms of the same transition. No external project/commit applications found in the source.
+
+## 💻 코드 패턴 (Code patterns)
+Individual properties vs. shorthand (language: CSS):
+```css
+div {
+  transition-property: width;
+  transition-duration: 2s;
+  transition-timing-function: linear;
+  transition-delay: 1s;
+}
+
+div {
+  transition: width 2s linear 1s;
+}
+```
+Transition combined with transform:
+```css
+button {
+  transition: background-color 1s ease-out, transform 1s ease-out;
+}
+```
+
+## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
+The `transition-timing-function` values trade off acceleration character: `linear` keeps a constant speed; `ease` (the default) starts slow, speeds up, then ends slow; `ease-in` starts slow; `ease-out` ends slow; `ease-in-out` is slow at both ends; and `cubic-bezier(n,n,n,n)` lets you define a custom curve when none of the presets fit. Choose `linear` for mechanical/continuous motion and an `ease*` variant for more natural-feeling UI transitions. [S1]
+
+## ⚖️ 모순 및 업데이트 (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 Transitions]], [[CSS Animations]], [[CSS Animation Timing]]
+- **참조 맥락:** Provides the fine-grained timing and delay control that builds on the basic transition declaration.
+
+## 📚 출처 (Sources)
+- [S1] W3Schools — CSS Transition Timing — https://www.w3schools.com/css/css3_transitions_timing.asp
+
+## 📝 변경 이력 (Change history)
+- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Transition Timing" page (Astra wiki-curation, P-Reinforce v3.1 format).