상태 변화 사이의 값을 부드럽게 보간합니다.
transition-property, duration, timing-function, delay를 지정합니다. 처음부터 끝 상태가 있어야 동작하며 transform과 opacity는 비교적 부드럽게 처리됩니다.
이번 예제의 출발점은 transition: transform 200ms ease;입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 duration을 1초로 바꾸고 체감 차이를 확인하세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
transition:all은 의도하지 않은 크기와 배치 속성까지 애니메이션할 수 있습니다.
직접 바꿔보세요duration을 1초로 바꾸고 체감 차이를 확인하세요.