CODEWITHSUNDEEP
csscss-animations
chopper
chopper

Reputation: 6709

Transition after animation with @keyframes

I have a loading indicator (a bar that continuously animates its width from 0% to 100%) using css3 keyframes. I trigger this behavior by adding a .loading class to by loading bar. Now once I am done loading I would like to animate out of the keyframes. Say, for example at the time that I finish loading the width is animated to 50% I would not have it jump to 100%, but ease it to 100% where it should stay.

I have tried adding a transition and animation to my loading bar class, but neither seems to be working. How do I go about this?

Here's the jsFiddle.

Upvotes: 5

Views: 2447

Answers (2)

Andrea Ligios
Andrea Ligios

Reputation: 50203

I upvoted @Jedidiah answer, I think that is what you need.

BTW, If you are interested in an alternative, simple CSS3 solution, then add to your #bar:

transition: all 1s;
-webkit-transition: all 1s

Running Demo

Potential drawbacks (depending on your needs):

  1. It won't respect the previous speed of the progressbar (no matter if you are at 10% or 90%, the remaining part will take 1 second to complete... but this is how often the progressbars of the installers work, so it may not be a problem);
  2. It won't run all the animation: if you are in the first half, it will fill to the left, instead of completing all the round.

Upvotes: 0

Jedidiah
Jedidiah

Reputation: 1194

You can use the animationiteration (MDN) event to detect when the animation reaches the end of a loop and then remove the class.

$('#bar').on('webkitAnimationIteration', function(e){
    $('#bar').removeClass('loading').off('webkitAnimationIteration');
});

I've updated the fiddle here: http://jsfiddle.net/jedidiah/kYnhF/6/

-

For simplicity I've only added the webkit prefix to the the fiddle but there is a useful article about css animation events in javascript here http://www.sitepoint.com/css3-animation-javascript-event-handlers/ where they share a little function to simplify using the prefixes you could use to support other browsers.

Upvotes: 5

Related Questions