x
<html><head><style> div { width: 100px; height: 100px; background: red; position: relative; animation: mymove 2s infinite; animation-play-state: paused;}@keyframes mymove { from {left: 0px;} to {left: 200px;}}</style></head><body><h1>Change animation-play-state with JavaScript</h1><p>Click the buttons to Play/Pause the animation:</p><button onclick="myPlayFunction()">Play</button><button onclick="myPauseFunction()">Pause</button><script>function myPlayFunction() { document.getElementById("myDIV").style.animationPlayState = "running";}function myPauseFunction() { document.getElementById("myDIV").style.animationPlayState = "paused";}</script><div id="myDIV"></div></body></html>