CSS의 animation-play-state 속성을 사용하면 애니메이션이 현재 실행 중인지, 아니면 일시 정지 상태인지를 간단하게 제어할 수 있습니다.
이 속성은 두 가지 값을 가집니다. 기본값인 running은 애니메이션을 계속 재생하고, paused로 설정하면 애니메이션이 진행 중이던 지점에서 멈춘 상태로 유지됩니다.
animation-play-state의 주요 값
- running – 애니메이션을 재생합니다 (기본값)
- 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>위 코드에서 div 요소에는 animation-play-state: paused;가 적용되어 있으므로, 페이지가 로드되더라도 애니메이션은 자동으로 시작되지 않고 멈춰 있는 상태로 표시됩니다.
실무에서는 이 속성을 :hover, :active 같은 CSS 선택자나 JavaScript와 함께 활용하여, 마우스를 올리거나 버튼을 클릭했을 때 애니메이션을 동적으로 재생하거나 일시 정지하는 인터랙션을 쉽게 구현할 수 있습니다.