State trigger
:hover, :focus, class 토글처럼 시작값과 끝값이 명확하면 transition 후보입니다.
transition·animation 선택 규칙
transition은 hover나 class 변경처럼 두 상태 사이의 속성 차이를 보간하고, animation은 @keyframes로 독립적인 시간표를 실행합니다.
transition-*
transition-property, duration, timing-function, delay로 상태 변화의 보간만 지정합니다.
@keyframes
0%, 50%, 100% 같은 중간 지점이나 자동 반복이 필요하면 animation-name으로 연결합니다.
reduced motion
@media (prefers-reduced-motion: reduce)에서 반복, 큰 이동, 자동 재생을 줄입니다.
버튼 피드백은 짧게, 화면 전환은 조금 길게 잡고 0s가 아닌지 먼저 확인합니다.
linear는 등속, ease-out은 도착감을 주며 cubic-bezier는 급가속과 튐을 직접 제어합니다.
left, width, height 애니메이션은 layout을 흔들 수 있어 transform과 opacity가 안전한 기본값입니다.
animation-iteration-count와 fill-mode가 끝난 뒤 스타일 유지 여부를 결정합니다.
상태 트리거
사용자 입력이나 class 토글 없이는 transition이 시작되지 않으므로 로더나 배너 순환은 animation이 맞습니다.
layout thrashing
top/left/width를 계속 바꾸면 reflow와 jank가 보일 수 있어 DevTools Performance에서 frame drop을 확인합니다.
최종 스타일
keyframes 종료 후 원래 스타일로 튀면 animation-fill-mode: forwards 또는 상태 클래스를 다시 점검합니다.