L’animazione CSS non funziona cambiando il valore massimo

Con questo JQuery cambio la posizione verticale del modulo, ma ho un problema con l’animazione: mi piacerebbe animare il cambiamento della posizione, in modo che l’utente possa vedere il campo di input spostarsi nella nuova posizione. Perché l’animazione non funziona?

http://jsfiddle.net/p6m97gwb/

Se è ansible, mi piacerebbe usare 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'); 

Usa transition invece di animate

dimostrazione

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