html - 如何自上而下缩小元素？

Question

我想通过将其大小从 100% 调整为零来使 div 消失动画。但是，如果我只是在动画上设置字段高度，元素就会从底部开始收缩，我希望它从顶部开始收缩。关于如何实现 ir 的任何想法？

这段代码展示了我今天的动画:

@-webkit-keyframes my-animation /* Safari and Chrome */
{

    0%
    {
        opacity: 1;
        height:44px;//element size
    }

    100%
    {
        opacity: 0;
        height: 0px;
    }


}

提前致谢。

Answer 1

你可以通过使用一点定位来完成你想要的。这是相关代码(也重构):

<div class="foo"></div>

--

.foo {
    position: relative;
}
@keyframes foo {
    100% {
        opacity: 0;
        height: 0;
        top: 44px; /* Height of element */
    }
}​

这是一个实例(悬停以触发动画):http://jsfiddle.net/joshnh/Fdg3C/