CSS animation-delay 속성
예시
2초 후 애니메이션 시작:
div {
animation-delay: 2s;
}
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
속성 은 animation-delay
애니메이션 시작에 대한 지연을 지정합니다.
animation-delay 값은 초(s) 또는 밀리초(ms)로 정의됩니다.
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
-webkit-, -moz- 또는 -o- 뒤에 오는 숫자는 접두사와 함께 작동한 첫 번째 버전을 지정합니다.
Property | |||||
---|---|---|---|---|---|
animation-delay | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
CSS 구문
animation-delay: time|initial|inherit;
속성 값
Value | Description | Play it |
---|---|---|
time | Optional. Defines the number of seconds (s) or milliseconds (ms) to wait before the animation will start. Default value is 0. Negative values are allowed. If you use negative values, the animation will start as if it had already been playing for N seconds/milliseconds. | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
더 많은 예
예시
음수 값 사용. 여기에서 애니메이션은 이미 2초 동안 재생된 것처럼 시작됩니다.
div {
animation-delay: -2s;
}
관련 페이지
CSS 튜토리얼: CSS 애니메이션
HTML DOM 참조: animationDelay 속성