CODEWITHSUNDEEP
jquerycssjquery-animatecss-animations
Leon Gaban
Leon Gaban

Reputation: 39018

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

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');
});

Upvotes: 3

Views: 1026

Answers (3)

Seano666
Seano666

Reputation: 2238

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 :).

Upvotes: 1

tszarzynski
tszarzynski

Reputation: 614

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.

Upvotes: 1

Fingel
Fingel

Reputation: 447

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.

Upvotes: 1

Related Questions