Motion CSS

Transition과 Animation 차이

hover처럼 시작과 끝이 있는 변화는 transition, keyframes처럼 여러 장면을 제어하면 animation이 맞다.

모션 선택 기준

timing

Transition

속성이 바뀌는 순간 이전 값과 다음 값 사이를 자연스럽게 이어준다.

@keyframes

0%, 50%, 100% 같은 중간 장면을 직접 정의해 반복 동작을 만든다.

Transition과 선택 기준

사용자 상태 반응이면 transition, 자동 진행이나 반복 연출이면 animation을 고른다.

상태 변화transitionkeyframes반복/제어
모션 선택 기준

두 기능 모두 움직임을 만들지만, 트리거가 상태 변화인지 독립 타임라인인지로 먼저 구분하면 선택이 쉬워진다.