¿Es posible revertir una animación css al eliminar una clase?

Otro enfoque, en lugar de usar display: none, es suprimir la animación inversa con una clase al cargar la página, y luego eliminar esa clase con el mismo evento que aplica la animación normal (por ejemplo: flipper). Así ( http://jsfiddle.net/astrotim/d7omcbrz/1/):

CSS-además del fotograma clave flipperUp publicado por Blake arriba

#item.no-animation 
{
  animation: none;
}

JQuery

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

Además de las respuestas aquí, por favor guarde en caché su $(selector)

Así que básicamente haces esto var elements = $(selector); para almacenar en caché.

¿Por qué?! Porque si utilizas el código en las respuestas de esta página tal cual le pedirás al DOM esa misma colección de elementos ($('#item')) cada vez. La lectura de DOM es una operación costosa.

Por ejemplo, la respuesta aceptada se vería algo así:

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

Ya que he escrito todo este texto, también podría responder a su pregunta usando CSS transiciones

Sé que pediste un ejemplo de animaciones CSS, pero para la animación que querías hacer (una tarjeta abierta), se puede lograr fácilmente usando transiciones CSS:

#item {
  width: 70px;
  height: 70px;
  background-color: black;
  line-height: 1;
  color: white;
}

#item+div {
  width: 70px;
  height: 100px;
  background-color: blue;
  transform: perspective(250px) rotateX(-90deg);
  transform-origin: 50% 0%;
  transition: transform .25s ease-in-out
}

#item:hover+div {
  transform: perspective(250px) rotateX(0);
}

<div id="item"></div>
<div></div>

Se está animando hacia abajo usando css, por lo que para que se anime hacia arriba necesita crear una clase, por ejemplo .item-up que hace la transformación en el sentido opuesto, por lo que entonces eliminaría la clase anterior y agregaría la clase item-up y eso debería animarla.

Le escribiría un violín js para ello, pero no conozco la sintaxis lo suficientemente bien.

Básicamente cuando se necesita:

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

Y

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

Jsfiddle.net/bmh5g/3, cortesía de Jake

Solución CSS de MDN y casi soportada por todos los navegadores

.animación (animationName 10s ease-in-out infinite alternate both running;)