전환 효과(transition)는 한 상태에서 다른 상태로 바뀌는 과정을 시각적으로 이어 보여주는 표현이다. 시작과 끝 사이의 관계를 드러내는 데 쓰인다.

- 작품 목록의 작은 이미지가 확대 화면으로 이어지면 어느 작품을 열었는지 알기 쉬울 수 있다. 모든 이동에 효과를 넣어야 하는 것은 아니다.
- [[이징]]과 지속 시간, 이동 거리가 함께 느낌을 만든다. 전환을 마칠 때까지 입력을 막으면 반복해서 쓰는 사람에게 지연이 된다.
- [[동작 감소 설정]]을 존중해 큰 이동이나 확대를 줄일 수 있다. 이때도 상태 변화와 결과를 알리는 [[피드백]]은 남긴다.

## 참고

- [MDN: 동작 감소 선호](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion)
- [앤서니 홉데이: 중단할 수 있는 동작](https://anthonyhobday.com/books/interactionandvisual/02.html)

#웹 #CSS #애니메이션 #기초