다음 프로퍼티는 transition-duration입니다.

duration은 '지속'이라는 뜻을 가진 프로퍼티로, transition이 발생하는 지속 시간을 지정할 수 있습니다. delay만 사용하면 프로퍼티 값만큼 시간이 지난 뒤 CSS 속성 값이 갑자기 확 변했기에 애니메이션 느낌이 덜했지만, transition-duration을 지정하면 좀 더 애니매이션 같은 효과를 표현할 수 있습니다.

duration 또한 얼만큼의 시간 동안 변할지 지정해 주어야 합니다. 때문에 delay와 같이 시간을 속성 값으로 가지며, 초 단위를 나타내는 s 나 밀리 초를 나타내는 ms로 나타냅니다. duration 역시 프로퍼티 값을 지정해주지 않으면 자동으로 0s가 입력되어 transition의 효과가 나타나지 않습니다.

이전 강의의 예시에서 .frirst, .second, .third를 아래와 같이 바꿔 줍니다.

각각 0초, 1초, 2초 동안 변화가 발생하는 것을 확인할 수 있습니다.

transition-duration은 transition-delay와 함께 실습해보기 좋습니다. 실습을 직접 진행하며 차이를 살펴봅시다.