When Animation Finishes Do Something

[realph]

I’m using some animation and am trying to work out how to add a class when the animation has finished.

For example, when this animation reaches the final keyframe (100%) I want to add a class.

@-webkit-keyframes bounceOutDown {
0% {
-webkit-transform: translateY(0);
}

20% {
opacity: 1;
-webkit-transform: translateY(-20px);
}

100% {
opacity: 0;
-webkit-transform: translateY(2000px);
}
}

Is this possible?

Any help is appreciated. Thanks in advance.

[Anonymous]

That would require Jquery. Try this. [http://codepen.io/Jarolin/pen/JIEyt](http://codepen.io/Jarolin/pen/JIEyt “”)

That’s the same animation. Just tweak the numbers a bit to fit your needs, and add what you want it to do after the animation is complete where i included the comment.

Basically if you want something to happen after the animation you should use Jquery for the entire animation instead of css.

[Author]

Posts