<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>