Question

我想通过将其从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/

如何从上到下收缩元素？

1 个答案: