Source Code:
(back to article)
Submit
Result:
Report an issue
<div id="animateBox" style="width: 100px; height: 100px; background: red; position: relative; animation: moveBox 5s 2;"></div> <div id="animationStatus"></div> <style> @keyframes moveBox { 0% { left: 0; } 50% { left: 200px; } 100% { left: 0; } } </style> <script> const box = document.getElementById('animateBox'); const statusDisplay = document.getElementById('animationStatus'); box.addEventListener('animationstart', function() { statusDisplay.innerHTML = 'Animation started'; }); box.addEventListener('animationend', function() { statusDisplay.innerHTML = 'Animation ended'; }); box.addEventListener('animationiteration', function() { statusDisplay.innerHTML = 'Animation iteration'; }); </script>