CSS transition은 어떻게 동작하나요?

Question

Accepted Answer

**transition**은 속성을 즉시 변경하는 대신, 시간에 걸쳐 이전 값에서 새 값으로 부드럽게 애니메이션합니다. *무엇을* 애니메이션할지와 *얼마나 오래*를 선언한 뒤, 속성을 변경(흔히 `:hover`나 클래스를 통해)해 트리거합니다.

```css
.button {
  background: blue;
  transition: background 0.3s ease;  /* background를 300ms에 걸쳐 애니메이션 */
}
.button:hover {
  background: darkblue;  /* 호버 시, 갑자기 바뀌지 않고 부드럽게 페이드 */
}
```

## 단축 속성의 네 부분

```css
transition: background 0.3s ease 0s;
/*          │          │    │    └── 시작 전 지연(delay) */
/*          │          │    └─────── timing function (easing 곡선) */
/*          │          └──────────── duration(지속 시간) */
/*          └─────────────────────── 애니메이션할 속성 (또는 `all`) */
```

## 여러 속성 애니메이션하기

```css
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-4px);          /* 위로 떠오름 */
  box-shadow: 0 8px 20px rgba(0,0,0,0.2); /* + 더 깊은 그림자 */
}
```

`all`을 쓰기보다 각 속성을 나열(쉼표로 구분)하세요. `all`은 의도하지 않은 것을 실수로 애니메이션해 성능을 해칠 수 있습니다.

## Timing function

```css
transition-timing-function: ease;        /* 느림-빠름-느림 (기본값) */
/* linear | ease-in | ease-out | ease-in-out */
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* 커스텀 곡선 */
```

## 성능: transform/opacity를 애니메이션하세요

```css
/* ✅ 저렴함 — GPU 합성, 레이아웃 재계산 없음 */
transition: transform 0.3s, opacity 0.3s;
/* ❌ 비쌈 — width/top/left 애니메이션은 매 프레임 레이아웃을 유발 */
transition: width 0.3s, left 0.3s;
```

`transform`과 `opacity` 애니메이션을 선호하세요. 이들은 레이아웃을 다시 실행하지 않고 compositor가 처리하므로 부드럽게(60fps) 유지됩니다.

## 접근성

```css
@media (prefers-reduced-motion: reduce) {
  * { transition: none; } /* 멀미를 겪는 사용자를 존중 */
}
```

## 왜 중요한가

transition은 단 한 줄로 UI를 반응적이고 생동감 있게 느끼게 하는 다듬음(호버 효과, 부드러운 상태 변화)을 더합니다.

성능을 위해 `transform`/`opacity`를 애니메이션해야 한다는 것과 `prefers-reduced-motion`을 존중해야 한다는 것을 아는 것이 부드럽고 접근성 있는 모션과 끊기는 애니메이션을 가르는 차이입니다.