How to add a fade out at the end of this CSS animation?

Question

Animation: http://codepen.io/leongaban/pen/wJAip

enter image description here

If you click the Animate Down button the jQuery will add the .animateDown class to the spinner. The spinner will then animate down to 0, but then pop back up to fullsize again.

How would you add a new keyframe at the end in CSS to hide the spinner after it shrinks?

Or

In jQuery would would I listen for when the spinner is scaled down to 0 then hide() it?

CSS:

.animateDown {
    -webkit-animation: animateDown .3s ease-in-out;
    animation: animateDown .3s ease-in-out;
}

@-webkit-keyframes animateDown { 
    0%  {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100% { 
       -webkit-transform: scale(0);
       transform: scale(0);
    }
}

jQuery:

$('#animate-down').unbind('click').bind('click', function() {
    $('#spinner').removeClass('animateUp');
    $('#spinner').addClass('animateDown');
});

This might help http://stackoverflow.com/questions/6186454/is-there-a-callback-on-completion-of-a-css3-animation — Seano666, Sep 25 '13 at 22:41
SWEET That worked! :D thanks, uhm do you want to post the answer? — Leon Gaban, Sep 25 '13 at 22:44

score 1 · Accepted Answer · answered Sep 25 '13 at 22:56

Like this? http://codepen.io/anon/pen/sypjf

You can use 'forwards' so that the CSS animation does not repeat:

.animateUp {
  -webkit-animation: animateUp .6s ease-in-out forwards;
  animation: animateUp .6s ease-in-out forwards;
}
.animateDown {
  -webkit-animation: animateDown .3s ease-in-out forwards;
  animation: animateDown .3s ease-in-out forwards;
}

And add opacity: 0 to the keyframe so that the element becomes invisible (not quite the same as $.hide():

@-webkit-keyframes animateDown { 
0%  {
  -webkit-transform: scale(1);
  transform: scale(1);

  }
100% { 
  -webkit-transform: scale(0);
  transform: scale(0);
  opacity: 0;
  }
}

Also don't forget to add the -moz prefixes, your demo currently doesn’t work in Firefox.

NICE! I like this even better :) Yeah I was wondering what was going on in Firefox — Leon Gaban, Sep 25 '13 at 23:06

score 1 · Answer 2 · answered Sep 25 '13 at 23:20

1

Also for a pure CSS solution take a look at animation-fill-mode

In your case: animation-fill-mode: forwards;

Only problem may be the cross-browser compatibility.

answered Sep 25 '13 at 23:20

tszarzynski

604
7
15

score 1 · Answer 3 · edited May 23 '17 at 11:53

1

If I'm understanding the problem right, you need to attach a callback to the css animation. Something like this.

$(".animateDown").bind('oanimationend animationend webkitAnimationEnd', function() { 
   alert("fin") 
});

As seen HERE

Edit: there is a pure JS version too, but I like my jQuery :).

edited May 23 '17 at 11:53

Community

1
1

answered Sep 25 '13 at 23:21

Seano666

2,238
1
15
14

How to add a fade out at the end of this CSS animation?

3 Answers3