CSS의 animation-play-state 속성은 요소에 적용된 애니메이션이 현재 재생 중(running)인지, 아니면 일시정지(paused) 상태인지를 지정하는 데 사용됩니다. 이 속성 하나만으로 별도의 JavaScript 없이도 애니메이션 흐름을 자유롭게 제어할 수 있습니다.
animation-play-state 속성의 값
- running – 애니메이션이 정상적으로 재생됩니다. (기본값)
- paused – 애니메이션이 일시정지되며, 다시 running으로 변경하면 멈춘 지점부터 이어서 재생됩니다.
기본 사용 예제
아래 예제에서는 div 요소에 적용된 애니메이션을 paused 상태로 설정했습니다. 코드를 실행하면 배경색과 위치가 변하는 애니메이션이 일시정지된 상태로 시작되는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 200px;
position: relative;
background: red;
animation-name: myanim;
animation-duration: 2s;
animation-play-state: paused;
}
@keyframes myanim {
from {left: 0px; background-color: green;}
to {left: 100px; background-color: blue;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
실전 활용 팁
animation-play-state는 :hover와 같은 가상 클래스와 함께 사용하면 특히 유용합니다. 예를 들어 아래처럼 작성하면 마우스 포인터를 요소 위에 올렸을 때 애니메이션이 자동으로 일시정지됩니다.
div:hover {
animation-play-state: paused;
}
또한 JavaScript로 해당 속성값을 동적으로 변경하면 재생 버튼 없이도 사용자 인터랙션에 따라 애니메이션을 시작하거나 멈출 수 있어, 슬라이더·배너·로딩 효과 등 다양한 UI 구현에 폭넓게 활용됩니다.