CSS 动画无法更改最高值

Question

有了这个 JQuery 我改变了表单的垂直位置，但是我有一个动画问题：我想为位置的变化设置动画，这样用户可以看到输入字段在移动到新职位。为什么动画不工作？

如果可以的话，我想用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;
}

CSS 动画无法更改最高值

CSS animation doesn't work changing top value

html

css

animation

animate.css