02 CSS Animation1. transition
duration
다음 프로퍼티는 transition-duration입니다.
duration은 '지속'이라는 뜻을 가진 프로퍼티로, transition이 발생하는 지속 시간을 지정할 수 있습니다. delay만 사용하면 프로퍼티 값만큼 시간이 지난 뒤 CSS 속성 값이 갑자기 확 변했기에 애니메이션 느낌이 덜했지만, transition-duration을 지정하면 좀 더 애니매이션 같은 효과를 표현할 수 있습니다.
duration 또한 얼만큼의 시간 동안 변할지 지정해 주어야 합니다. 때문에 delay와 같이 시간을 속성 값으로 가지며, 초 단위를 나타내는 s 나 밀리 초를 나타내는 ms로 나타냅니다. duration 역시 프로퍼티 값을 지정해주지 않으면 자동으로 0s가 입력되어 transition의 효과가 나타나지 않습니다.
이전 강의의 예시에서 .frirst, .second, .third를 아래와 같이 바꿔 줍니다.
CSS
1
2
3
4
5
6
7
8
9
.first {
transition-duration: 0s;
}
.second {
transition-duration: 1s;
}
.third {
transition-duration: 2s;
}각각 0초, 1초, 2초 동안 변화가 발생하는 것을 확인할 수 있습니다.
transition-duration은 transition-delay와 함께 실습해보기 좋습니다. 실습을 직접 진행하며 차이를 살펴봅시다.
