CSS animation-delay 속성
정의와 사용법
animation-delay 속성은 애니메이션이 언제 시작할지 정의합니다.
animation-delay 값은 초 또는 밀리초로 계산됩니다.
훌륭한 팁:부정적 값을 허용합니다. -2s는 애니메이션을 즉시 시작하지만 2초를 건너뛰고 애니메이션 주기를 시작합니다.
또한 참조하십시오:
CSS3 강의:CSS 애니메이션
HTML DOM 참조서:animationDelay 속성
예제
예제 1
2초를 기다린 후 애니메이션을 시작합니다:
div {
animation-delay: 2s;
}
예제 2
부정적 값을 사용하면, 애니메이션이 2초를 건너뛰고 애니메이션 주기를 시작합니다:
div {
animation-delay: -2s;
}
CSS 문법
animation-delay: time;
| 값 | 설명 | 테스트 |
|---|---|---|
| time | 선택 사항입니다. 애니메이션 시작 전에 기다릴 시간을 초 또는 밀리초로 정의합니다. 기본 값은 0입니다. | 테스트 |
기술 세부 사항
| 기본 값: | 0 |
|---|---|
| 상속성: | no |
| 버전: | CSS3 |
| JavaScript 문법: | object.style.animationDelay="2s" |
브라우저 지원
표의 숫자는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.
가 -webkit-、-moz- 또는 -o- 접두사를 포함한 숫자는 프리픽스를 사용하는 첫 번째 버전을 의미합니다.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 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- |
