상태 변화 사이의 값을 부드럽게 보간합니다.
transition-property, duration, timing-function, delay를 지정합니다. 처음부터 끝 상태가 있어야 동작하며 transform과 opacity는 비교적 부드럽게 처리됩니다.
transition을 hover 규칙이 아니라 기본 상태인 .target에 적었기 때문에 마우스를 올릴 때와 뗄 때 모두 220ms 동안 값이 이어집니다. 마우스를 올리거나 Tab으로 포커스를 주면 버튼이 translateY(-5px)로 5px 떠오르며 초록 배경이 갈색으로 바뀌고, 목록에 적은 transform과 background-color만 보간되므로 다른 속성이 바뀌면 즉시 적용됩니다.
height: 0에서 auto처럼 한쪽이 auto인 변화는 숫자로 보간할 수 없어 전환 없이 바로 바뀝니다. 펼침 효과에는 max-height에 넉넉한 값을 주거나, 부모를 grid로 만들고 grid-template-rows를 0fr에서 1fr로 바꾸는 방법을 씁니다.
transition:all은 의도하지 않은 크기와 배치 속성까지 애니메이션할 수 있습니다.
직접 바꿔보세요duration을 1초로 바꾸고 체감 차이를 확인하세요.