Transition

Concept

수치로 표현하는 값이 변할 때 에니메이션을 줄 수 있는 속성
수치가 아닌 auto일 경우 작동을 안함
transform과 찰떡궁합이다. transform은 즉시 바뀌는데, transition을 걸어주면 서서히 바뀌기 때문에 좀더 smooth 하게 UI가 그려진다.
cubic-bezier를 사용할 수 있어서 transform 과정에서 어떤 속도로 변화하는지 설정할 수 있다. (chrome devtool로 편하게 사용 가능)

Transition Cubic-bezier

Transition vs Transfrom-duration

transform-duration을 사용해도 된다고 생각하지만 차이가 명확하다. 그래서 하고자 하는거에 따라 적용하면 될거 같다.
transition을 걸어두면, transform 된 요소가 예전 요소로 되돌아갈때도 부드럽게 작동하지만, transform-duration은 그렇지 않다.