Detect when a CSS animation has finished in JavaScript - 'animationend' event

In this video we're going to take a look at the "animationend" event in JavaScript which allows you to detect when a CSS animation has completed/ended.

Support me on Patreon:

For your reference, check this out:

Follow me on Twitter @dcode!

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

[Pyraptor]

Thank you for this, I used to put a timer and I knew I shouldn't be doing it like that

[behar]

Nice video, but please do a video about animation on scroll with Vanilla JS, thank you :)

[hossamayman]

I wanna know more about the @keyframes

[RCS-CHARTS]

I have an issue, let's say you animated a logo and a title, having two 2 animations. So when applying an event listener for the first animation, it works just fine, but when trying to apply another event listener for the animationend for the second animation, turns out it detects or run after the first animation end. Why does that happen?.

[KostaTsourdalakis]

Love the vid but urs a little crazry thouh lolmao bless ur hart mr vibrations

[clas_real]

Idk what i did wrong, But it did not work for me but I solved it, Here is the code:


window.onload=function(){
const Box=

if(Box)
{
console.log("Box exists")
Box.addEventListener("animationend", () =>{

alert("Animation Has ended");
});
}
}