如何自上而下缩小元素？答案

【问题标题】：How to shrink element top-down?如何自上而下缩小元素？
【发布时间】：2012-12-13 10:59:42
【问题描述】：

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

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

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

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

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


}

提前致谢。

【问题讨论】：

将position:absolute（或相对/固定）和top:0px设置为top:44px?

标签： html css web css-animations

【解决方案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/

【讨论】：