속성 animation-play-state

속성 animation-play-state는 애니메이션의 상태를 설정할 수 있습니다: 애니메이션이 재생 중인지 또는 일시 정지 중인지.

구문

선택자 {
	animation-play-state: paused | running;
}

값

값	설명
`paused`	애니메이션이 일시 정지된 상태입니다.
`running`	애니메이션이 재생 중입니다.

기본값: running.

예제

이 예제에서는 요소에 마우스를 올리면 애니메이션이 시작되고, 마우스를 요소에서 떼면 애니메이션이 중지됩니다:

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

@keyframes move {
	from {
		width: 200px;
	}
	to {
		width: 400px;
	}
}

#elem {
	animation-play-state: paused;
	animation-duration: 1s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	height: 50px;
}
#elem:hover {
	animation-play-state: running;
}

예제 . 다른 요소에 마우스 오버

이번에는 다른 요소에 마우스를 올리면 애니메이션이 시작되고, 마우스를 그 요소에서 떼면 애니메이션이 중지됩니다:

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

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

#target {
	border: 1px solid red;
	margin-bottom: 10px;
	width: 50px;
	height: 50px;
}

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

#target:hover + #elem {
	animation-play-state: running;
	border: 1px solid green;
}

참고 항목

속성 animation-name,
애니메이션 이름을 설정합니다
속성 animation-duration,
애니메이션 지속 시간을 설정합니다
속성 animation-delay,
애니메이션 실행 전 지연 시간을 설정합니다
속성 animation-timing-function,
애니메이션 실행 속도를 설정합니다
속성 animation-iteration-count,
애니메이션 반복 횟수를 설정합니다
속성 animation-direction,
애니메이션 방향을 설정합니다
속성 animation-fill-mode,
애니메이션 상태를 설정합니다
속성 animation,
애니메이션을 위한 단축 속성입니다
명령 @keyframes,
애니메이션 키프레임을 설정합니다
부드러운 전환 transition, 요소에 마우스를 올릴 때의 애니메이션입니다