CSS動畫無法改變頂級值

Question

有了這個JQuery我改變了表單的垂直位置，但我有動畫的問題：我想動畫位置的變化，所以用戶可以看到輸入欄移動到新的位置。爲什麼動畫不工作？

http://jsfiddle.net/p6m97gwb/

如果有可能，我想用animate.css

HTML

<div id="searchMainWrapper"> 
    <div id="searchMain" class="vertical-align-middle"> 
     <form> 
      <input type="text"> 
     </form> 
    </div> 
</div> 

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'); 

Answer 1

使用transition而不是animate

demo

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