상태 변경 여부
hover와 grow는 값 변화가 작아 전환이 자연스럽다.
선택 체크
두 상태를 잇는지, 프레임을 재생하는지 선택
버튼 hover처럼 사용자가 상태를 바꾸면 transition을, 로딩 스피너처럼 스스로 반복되는 움직임이면 animation을 먼저 검토한다.
실습 예제를 읽는 네 가지 질문
button, box, spinner, slide보간 대상
변하는 속성을 명시하면 전환 의도가 분명해진다.
장면이 여러 개 여부
bounce와 slideIn은 keyframes로 중간 장면을 만든다.
반복이 필요한 여부
반복은 infinite, 등장 효과는 forwards로 마무리한다.
단순히 움직인다고 모두 animation으로 만들 필요는 없다. 시작 조건, 중간 프레임, 반복 여부를 차례로 확인하면 코드가 짧고 읽기 쉬워진다.