Source Code: (back to article)
<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>