CSS3 transition-duration 속성 사용 방법 및 예제

transition-duration CSS 속성은 전환 애니메이션이 완료되기 위해 필요한 초 또는 밀리초를 지정합니다.

아래 표는 이 속성의 사용 설명과 버전 기록, 그리고 JavaScript 스크립트에서 이 속성의 사용 문법을 설명합니다。

transition-duration 사용 문법

이 속성의 문법은 다음과 같습니다:

transition-duration:　time　|　initial　|　inherit

다음 예제는 transition을 사용하는 방법을 보여줍니다-duration 속성.

button　{
　　　　background:　#fd7c2a;
　　　　/*　Safari용　3.0+　*/
　　　　-webkit-transition-property:　background;
　　　　-webkit-transition-duration:　2s;
　　　　
　　　　transition-property:　background;
　　　　transition-duration:　2s;
}
button:hover　{
　　　　background:　#3cc16e;
}

속성 값

아래 표는 이 속성의 값을 설명합니다。

브라우저 호환성

transition-duration 속성의 브라우저 호환성, 아래 표의 숫자는 이 속성을 지원하는 브라우저의 최소 버전 번호를 나타냅니다; 모든 주요 브라우저는 이 속성을 지원합니다.

추가로 읽어보세요

다음 튜토리얼을 참조하십시오:CSS3 Transitions。

관련 속성:transition，transition-delay，transition-property，transition-timing-function。