How to re-animate CSS3 animations on class change

Question

So I've these CSS3 script

#place.us .level1 { background-position: -100px; background-color: #333; }
#place.gb .level1 { background-position: -100px; background-color: #CCC; }

@-webkit-keyframes place-pop-livel1 { 
    0% { bottom: -100px; } 
    100% { bottom: 30px; }
}
#place .level1 { 
    animation: place-pop-livel1 2s ease-out;
    -moz-animation: place-pop-livel1 2s ease-out; 
    -webkit-animation: place-pop-livel1 2s ease-out; 
}

When the page first loads, the div has #place.us and the animation works perfectly. Now I want to change the class of the div to 'gb' to make it #place.gb using jquery and as soon as the class is changed, I want the same animation to happen.

My jquery code is simple

$('.change-city').live('click', function(){
    var city = $(this).data('city'); //gb or us
    $('#place').removeClass().addClass(city);
});

The class changes and the .level1 property is affected as declared in the CSS but the animation doesn't happen. How do I make sure that the animation happens?

Answer 1

I'd recommend using CSS transitions as they have better browser coverage, they are simpler to manage and they fallback better (if the browser doesn't support transitions it does the same thing without the animation).

You problem can be solved like this:

// after load add the animation
$(".level1").addClass("pop");

// after the animation is done hide it again
$(".level1").bind("webkitTransitionEnd mozTransitionEnd oTransitionEnd msTransitionEnd transitionend", function(){
  $(this).removeClass("pop");
});

$('.change-city').live('click', function(){
    var city = $(this).data('city'); //gb or us
    $('#place').removeClass().addClass(city).find(".level1").addClass("pop");
});

And the CSS

#place.us .level1 {background-color: #333; }
#place.gb .level1 {background-color: #CCC; }


#place .level1 {
  position: absolute;
  background-color: #000;
  width: 100px;
  height: 100px;
  bottom: -100px;
  -webkit-transition: bottom 2s ease;
  -moz-transition: bottom 2s ease;
  -o-transition: bottom 2s ease;
  -ms-transition: bottom 2s ease;
  transition: bottom 2s ease;
}


#place .pop {
  bottom: 30px
}

You can check out the jsfiddle here: http://jsfiddle.net/EmsXF/