https://ko.javascript.info/css-animations (아주 좋은 정보들.)

css-transition

.transition-property

transition-property 프로퍼티엔 left, margin-left, height, color 같이 애니메이션 효과를 적용할 프로퍼티 목록을 정의한다.

이때 주의할 점은 모든 프로퍼티에 애니메이션 효과를 적용할 수 없다. 참고로 흔히 사용되는 프로퍼티 대다수엔 애니메이션 효과를 적용할 수 있다.

transition-duration

transition-duration 프로퍼티엔 애니메이션 효과를 얼마 동안 줄지를 설정한다. 시간은 CSS 시간 형식(CSS time format)을 따라야 하는데, 초 단위(s)나 밀리초 단위(ms)를 사용할 수 있다.

transition-delay

transition-delay 프로퍼티엔 애니메이션 효과가 시작되기 전에 얼마만큼의 지연 시간을 줄지 설정한다. transition-delay 값을 1s로 설정하면 애니메이션 효과가 1초 후에 나타나게 된다.

transition-delay엔 음수 값도 넣을 수 있다. 값이 음수일 땐 애니메이션 효과가 중간부터 나타난다. transition-duration을 2s, 지연 시간을 -1s로 설정하면 애니메이션 효과는 1초가 지난 후 1초 동안 지속되게 된다.