1

divのサイズを100％からゼロに変更して、アニメーションを消滅させるdivを作成したいと思います。ただし、アニメーションでフィールドの高さを設定しただけでは、要素は下の部分から縮小し始め、上から縮小し始めたいと思います。irを実現する方法についてのアイデアはありますか？

このコードは、今日の私のアニメーションを示しています。

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

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

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


}

前もって感謝します。

4

1 に答える 1

2

少しのポジショニングを使用することで、あなたが望んでいることを行うことができます。関連するコードは次のとおりです（これもリファクタリングされています）：

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

--

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

そして、ここにライブの例があります（アニメーションをトリガーするためにカーソルを合わせます）：http://jsfiddle.net/joshnh/Fdg3C/

于 2012-12-13T02:59:42.523 に答える