animation-delay 속성

속성 animation-delay는 애니메이션 시작 전 지연 시간을 설정합니다.

구문

선택자 {
	animation-delay: s 또는 ms 단위의 시간;
}

값

값	설명
`s`	초 단위로 시간을 지정합니다 (예: `3s`).
`ms`	밀리초 단위로 시간을 지정합니다 (예: `3ms`). 1초는 `1000` 밀리초입니다.

기본값: 0s.

예제

이 예제에서 애니메이션 시작 전에 3초의 지연 시간이 있습니다:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	animation-delay: 3s;
	animation-duration: 6s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

함께 보기

애니메이션 이름을 지정하는 animation-name 속성
애니메이션 지속 시간을 지정하는 animation-duration 속성
애니메이션 실행 속도를 지정하는 animation-timing-function 속성
애니메이션 반복 횟수를 지정하는 animation-iteration-count 속성
애니메이션 방향을 지정하는 animation-direction 속성
애니메이션 상태를 지정하는 animation-fill-mode 속성
애니메이션을 일시 정지할 수 있도록 하는 animation-play-state 속성
애니메이션을 위한 단축 속성인 animation 속성
애니메이션 키프레임을 정의하는 @keyframes 명령
요소에 마우스를 올렸을 때의 애니메이션을 나타내는 transition 부드러운 전환