animación - quitar, agregar clase

[ZoroRoronoa]

Me imagino que usas Js al dar click al boton y cambiar las clases.
Y para la animacion usas transition de CSS3.

Te dejo el ejemplo:
Saludos.


Ve el ejemplo aqui:
http://codepen.io/kurosaki/pen/dPQJOP

Código HTML:

<div id="midiv" class="normal"></div>
<button>Animar</button>
 

Código CSS:

div {
  background:red;
}
 
.animando {
  width:100px;
  height:100px;
  transition: all 2s ease-in;
}
 
.normal {
  width:0;
  height:0;
  transition: all 2s ease-in;
}
 

Código Javascript:

$(document).ready( function() {
  
  $("button").click( function() {
    var clase = $("#midiv").attr("class");
    if(clase == "animando") {
      //alert("existe clase animando");
      //la quitamos y agregamos NORMAL
      $("#midiv").attr("class","normal");
        $(this).html("Animar");
    } else {
      //alert("CLASE NORMAL");
      //agregamos ANIMACION
      $("#midiv").attr("class","animando");
        $(this).html("Desanimar");
    }
  });
  
});