2nd/10_Wiki/Topic_CSS/CSS_Transitions_Timing.md

---
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).