6.6.3 transition-duration 속성

transition-duration 속성은 전환 효과의 지속 시간을 설정하는 데 사용합니다. 속성값으로는 초 단위 값을 사용합니다.

transition-duration:<시간>;

예를 들어, 다음 코드를 실행하면 전환 효과가 1초 동안 발생합니다.

transition-duration:1s;

여러 속성을 쉼표로 구분해 전환 효과를 지정할 때는 transition-property와 transition-duration 속성을 각각 지정할 수 있습니다. 만약 다음과 같이 코드를 작성한다면 background-color 속성은 1초(1s), color 속성은 0.5초(500ms), width 속성은 2초(2s) 동안 각 속성의 지속 시간이 지정되어 전환 효과가 발생하게 됩니다.

transition-property:background-color, color, width;
transition-duration:1s, 500ms, 2s;