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

Question

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

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

@-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/