Possible to reverse a css animation on class removal?

Question

Essentially what I\'m trying to do is give an element a CSS animation when it gains a class, then reverse that animation when I remove the class without playing the anim

Answer 1

Its animating down using css so to get it to animate up you need to create a class, say .item-up that does the transformation in the opposite so then you would remove the previous class and add the item-up class and that should animate it up.

I would write you a js fiddle for it but I dont know the syntax well enough.

Basically when you will need:

@keyframes flipper
@keyframes flipper-up  //This does the opposite of flipper

and

$('#trigger').on({
    mouseenter: function(){
        $('#item').removeClass('flipped-up');
        $('#item').addClass('flipped');
    },
    mouseleave: function(){
        $('#item').removeClass('flipped');
        $('#item').addClass('flipped-up');
    }
})

jsfiddle.net/bmh5g/3 courtesy of Jake