CSS 애니메이션과 트랜지션 완전 가이드

트랜지션과 키프레임을 구분하세요

트랜지션은 hover, focus, 열기/닫기처럼 A 에서 B 로 가는 상태 변화에 적합합니다. 예측 가능하고 재사용하기 쉽기 때문입니다.

키프레임은 로더나 강조 흐름에 유리하지만, 반복 애니메이션은 절제해야 하고 reduced-motion 대응도 준비해야 합니다.

팀 차원에서 고정할 모션 규칙

• 기본은 `transform` 과 `opacity` 중심으로 애니메이션합니다.
• easing 은 입장, 퇴장, 강조 정도의 소수 토큰으로 제한합니다.
• duration 과 easing 을 디자인 토큰으로 관리해 컴포넌트별 제각각 값을 막습니다.

실무 입력/출력 예시

컴포넌트: 토글 스위치
목표: 빠르고 명확한 상태 피드백

transform 180ms cubic-bezier(.2,.8,.2,1)
color 140ms ease-out

추천 CSS 도구