Grow your CSS skills. Land your dream job.

When Animation Finishes Do Something

  • # April 28, 2013 at 8:57 pm

    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.

    # April 28, 2013 at 9:16 pm

    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.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".