I animate a block with a keyframe, then trigger the reversed animation in javascript, like this :

$('#block').removeClass('animate1').addClass('animate2');

With animate1 and animate2 corresponding to two CSS classes calling the animation (for the demo, in webkit only), and #block a simple div:

CSS

.animate1 {
    -webkit-animation: shift 1s ease-in-out forwards;
}
.animate2 {
    -webkit-animation: shift 1s ease-in-out backwards reverse;
}
@-webkit-keyframes shift {
    from {
        left: 0px;
    }
    to {
        left: 200px;
    }
}

HTML

<div id="block" class="animate2"></div>

It simply doesn't work. See this fiddle for demo (Chrome 30).

Facts

If I trigger the animations the other way around, I mean the reversed one first, then the normal one, it's working properly (demo):

$('#block').removeClass('animate2').addClass('animate1'); //Works.

It's working too if I remove the current class and add the next class with independent functions triggered by click on buttons.

Can someone help me understand this strange behavior? I'm stuck!

Edit

For future visitors, I'm not looking for a workaround anymore, just trying to find out what's happening here:

• What is this "reset time" required by browser?
• Why does it works in a way, and not in the other?
• Why triggering the animation within an inner closure works?

I'll change the accepted answer if appropriate.