Duda: Animación toggle que se invierta al 2do click (enlace a codepen)

[itawebdesigner]

Hola, un cordial saludo.

Se que es una novatada, pero estoy aprendiendo. Amplio mi pregunta:

Tengo una animación en secuencia CSS y esta se activa por medio de una clase. Con un simple script y mediante un toggleClass añado la clase dinamicamente al hacer clic en un botón.

El problema: Que al quitar la clase vuelve al estado inicial, pero de forma muy brusca sin transición y quería saber sí hay alguna forma de invertir la animación.

Sé que la propiedad de css "animation-direction" tiene un valor "reverse", pero no sé como aplicarla de forma dinámica o sí existe una mejor forma de hacerlo.

Todo esto lo pueden ver en el siguiente codepen:
[URL="http://codepen.io/g3kdigital/pen/GordzZ"]
http://codepen.io/g3kdigital/pen/GordzZ[/URL]

Gracias de antemano por los comentarios.

[itawebdesigner]

Aquí logre hacer lo que me propuse:

http://codepen.io/g3kdigital/pen/LGxqKx

Pero no se sí lo estoy haciendo de la manera más optima, ya que me toco crear otras clases que hicieran la animación en sentido contrario, por lo que quizás no es la mejor solución.