The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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. []( “”)

    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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed