Neon DistrictISSUE #6 of 50

animation events · animationstart · animationend

PrismaVSJank the Janitor

Prisma saysAnimation events (animationstart, animationend, animationiteration) let JS react to CSS animations.

CSS animations fire DOM events: animationstart, animationend, animationiteration. The classic pattern: add an animation class, listen for animationend, then remove the class so it can replay. This bridges declarative CSS motion with JS logic.

Power-ups you unlock

animationstart / animationend / animationiteration
Listen with addEventListener in JS
Remove the class on animationend to replay
Bridges CSS motion and JS logic

Jank the Janitor attacks — common mistakes

Never removing the class so it can’t replay
Listening on the wrong element
Forgetting transitionend is the transition analog

Boss battleTrigger a shake on click, remove the class on animationend so it can fire again.

Example code

<!doctype html><html><head><meta charset="utf-8">
<style>.box{width:80px;height:80px;background:#b388ff}.shake{animation:sh .4s}@keyframes sh{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}</style></head><body style="background:#06040d;padding:30px"><div id="b" class="box"></div>
<script>const b=document.getElementById('b');b.onclick=()=>b.classList.add('shake');b.addEventListener('animationend',()=>b.classList.remove('shake'));</script></body></html>

▶ Open the interactive comic issue

‹ Animations · Keyframes · Iteration · Direction Variables · Custom Properties · --Var ›