La animación CSS no funciona cambiando el valor máximo

Con este JQuery cambio la posición vertical de la forma, pero tengo un problema con la animación: me gustaría animar el cambio de posición, para que el usuario pueda ver el campo de entrada moviéndose a la nueva posición. ¿Por qué la animación no funciona?

http://jsfiddle.net/p6m97gwb/

Si es posible, me gustaría usar animate.css

HTML

CSS

 #searchMainWrapper { -webkit-animation: animate 3s; /* Safari and Chrome */ -moz-animation: animate 3s; /* Firefox */ animation: animate 3s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; position: absolute; width: 100%; height: 100% } .vertical-align-middle { position: relative; top: 50%; transform: translateY(-50%); } .vertical-align-top { position: relative; top: 0px; } 

JS

 $('#searchMain').removeClass('vertical-align-middle').addClass('vertical-align-top'); 

Use la transition lugar de animate

manifestación

 #searchMain{ position:absolute; transition: 3s; } .vertical-align-middle { top: 50%; } .vertical-align-top { top: 0px; }