Online Html Editor

<!DOCTYPE html> <html lang="en"> <head> <style> body { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; } .box { width: 100px; height: 100px; border-radius: 50%; display: flex; justify-content: center; align-items: center; background-color: #3498db; color: white; font-size: 16px; margin: 20px; animation: move 4s linear infinite; animation-play-state: running; } @keyframes move { 0% { transform: translateX(0); } 100% { transform: translateX(200px); } } </style> </head> <body> <h2>Animation Play State Example</h2> <div class="box" id="animateBox">Pause/Play</div> <button id="toggleButton">Pause</button> <script > document.getElementById('toggleButton').addEventListener('click', function() { const box = document.getElementById('animateBox'); const currentState = getComputedStyle(box).animationPlayState; if (currentState === 'running') { box.style.animationPlayState = 'paused'; this.textContent = 'Play'; } else { box.style.animationPlayState = 'running'; this.textContent = 'Pause'; } }); </script> </body> </html>