animationPlayState 속성은 CSS 애니메이션의 현재 상태가 실행 중(running)인지 일시 정지(paused)인지를 설정하거나 조회하는 데 사용됩니다. 버튼 클릭 등 특정 이벤트에 따라 애니메이션을 동적으로 시작하거나 멈추는 토글(toggle) 기능을 구현할 때 특히 유용합니다.
구문(Syntax)
animationPlayState 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.animationPlayState = "running|paused|initial|inherit";
속성 값(Values)
animationPlayState 속성에 사용할 수 있는 값은 다음과 같습니다.
| 번호 | 값 및 설명 |
|---|---|
| 1 | running 애니메이션이 현재 실행 중임을 지정합니다. 별도로 설정하지 않으면 적용되는 기본(default) 값입니다. |
| 2 | paused 애니메이션을 일시 정지 상태로 지정합니다. 정지된 위치에서 다시 running으로 변경하면 이어서 재생됩니다. |
| 3 | initial 해당 속성을 브라우저의 기본 초기값으로 설정합니다. |
| 4 | inherit 부모 요소의 animationPlayState 속성 값을 그대로 상속받습니다. |
예제(Example)
다음 예제는 animationPlayState 속성을 활용해 애니메이션 상태를 전환하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 70px;
height: 30px;
border: 3px solid brown;
box-shadow: 0 20px 0 -3px orchid;
z-index:-1;
position: relative;
animation: move 5s infinite;
animation-play-state: play;
}
@keyframes move {
from {top: 0px; }
to {top: 400px;}
}
</style>
<script>
function stateToggle(){
document.getElementById("DIV1").style.animationPlayState="paused";
document.getElementById("Sample").innerHTML="애니메이션이 일시 정지되었습니다";
}
</script>
</head>
<body>
<div id="DIV1"></div>
<p>아래 버튼을 클릭하면 위 애니메이션의 상태가 전환됩니다.</p>
<button onclick="stateToggle()">상태 변경</button>
<p id="Sample"></p>
</body>
</html>
실행 결과(Output)
위 코드를 실행하면 박스가 화면 위쪽에서 아래쪽으로 반복해서 이동하는 애니메이션이 출력됩니다.
이때 [상태 변경] 버튼을 클릭하면 JavaScript의 stateToggle() 함수가 호출되어 animationPlayState 값이 paused로 바뀌고, 진행 중이던 애니메이션이 즉시 일시 정지됩니다.
