속성 animation-duration

속성 animation-duration은 애니메이션 실행 시간을 설정합니다.

구문

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

값

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

기본값: 0s.

예제

이 예제에서 애니메이션은 3초 동안 재생됩니다:

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

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

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

같이 보기

애니메이션 이름을 지정하는 속성 animation-name,
애니메이션 실행 전 지연 시간을 지정하는 속성 animation-delay,
애니메이션 실행 속도를 지정하는 속성 animation-timing-function,
애니메이션 반복 횟수를 지정하는 속성 animation-iteration-count,
애니메이션 방향을 지정하는 속성 animation-direction,
애니메이션 상태를 지정하는 속성 animation-fill-mode,
애니메이션을 일시 정지할 수 있게 하는 속성 animation-play-state,
애니메이션을 위한 단축 속성 animation,
애니메이션 키프레임을 정의하는 명령어 @keyframes,
요소에 호버 시 실행되는 애니메이션인 transition 부드러운 전환