애니메이션은 움직임 시간, 움직임 지연 시간, 움직임 방향, 움직임 속도, 움직임 진행상태, 움직임 반복 횟수, 움직임 진행상태, 움직임 속도, 키프레임 이름 등을 설정하여 원하는 애니메이션을 구현 할 수 있습니다.
animation-delay
animation-delay 속성은 애니메이션 지연 시간을 설정합니다.
특징 | 설명 |
---|---|
기본 값 | animation-delay: 0s; |
적용 | animation |
버전 | CSS3 |
사용성 | ★★★★★ |
정의(Definition)
- animation-delay 속성은 애니메이션 지연 시간을 설정합니다.
애니메이션과 관련된 속성(Animation Related Properties)
- animation 속성은 애니메이션과 관련된 속성을 일괄적으로 설정합니다.
- animation-delay 속성은 애니메이션 지연 시간을 설정합니다.
- animation-direction 속성은 애니메이션 움직임 방향을 설정합니다.
- animation-duration 속성은 애니메이션 움직임 시간을 설정합니다.
- animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다.
- animation-iteration-count 속성은 애니메이션 반복 횟수를 설정합니다.
- animation-name 속성은 애니메이션 keyframe 이름을 설정합니다.
- animation-play-state 속성은 애니메이션 진행상태를 설정합니다.
- animation-timing-function 속성은 애니메이션 움직임의 속도를 설정합니다.
문법(Syntax)
animation-delay : time | inherit;
//단독으로 사용하는 경우
animation-delay: 1s;
animation-delay: 500ms;
//속기형으로 사용하는 경우
animation: ani 1s 1s; //시간이 두번 나오는 경우 앞에는 지속시간 뒤에는 지연시간을 의미
animation: ani 1s 500ms ease; //@keyframe이름, 지속시간, 지연시간, 움직임효과
속성(Property)
속성값 | 설명 |
---|---|
time | 요소가 로드된 후 애니메이션이 시작될 때 까지의 시간을 설정합니다. |
inherit | 부모 요소의 속성을 상속받습니다. |
예제1(Sample)
애니메이션 지연 시간을 설정하는 예제입니다.
HTML
CSS
SCRIPT
호환성(Compatibility)
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
animation-delay | ○ | ○ | ○ | ○ | ○ | ❌ | ❌ | ❌ | ❌ | ○ | ○ | ○ | ○ | ○ |