06/07/animation-play-state.html
<style>
div{
width:100px;
height:100px;
background-color:red;
position:relative;
animation-name:move;
animation-duration:10s;
animation-fill-mode:forwards;
animation-play-state:paused;
}
@keyframes move{
from{
left:0;
}
to{
left:300px;
}
}
</style>
</head>
<body>
<div></div>
<button id="start">start</button>
<button id="paused">paused</button>
<script>
const box = document.querySelector("div");
document.getElementById("start").addEventListener("click", function(){
box.style.animationPlayState = "running";
});
document.getElementById("paused").addEventListener("click", function(){
box.style.animationPlayState = "paused";
})
</script>
</body>
</html>
그림 6-77 실행결과
animation-play-state 속성값을 paused로 설정했기 때문에 코드를 실행해도 애니메이션이 실행되지 않습니다. 이때 화면의 
버튼을 누르면 div 요소에서 애니메이션이 시작되고 
버튼을 누르면 일시 정지됩니다.