CSS3 transition-delay 속성 사용법 및 예제

transition-delay CSS 속성은 변환을 언제 시작할지 정의합니다(예를 들어, 하나의2s값은 변환을 애플리케이션에서 시작하는 것을 나타냅니다2초 후에 시작합니다). 이 속성의 값은 초 또는 밀리초로 지정할 수 있습니다.

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

transition-delay 사용 문법

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

transition-delay:　time　|　initial　|　inherit

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

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

속성 값

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

브라우저 호환성

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

더 읽기

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

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