0

要素が必要で、それらを個別にアニメーション化したいと考えています。要素 1 はアニメーション 1 を再生し、要素 2 はアニメーション 2 を再生する必要があります。 しかし、私がそれをテストすると、要素1は両方のアニメーションを再生し、要素2は何も再生しません。要素 2 のアニメーションを遅延させて開始すると、これは発生しませんが、これは解決策ではありません... 要素 1 は次のとおりです。



#wrapper_splashscreen #logo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 200px;
    height: 200px;
    margin-top: -100px;
    margin-left: -100px;
    -webkit-animation: logoIntro 0.5s 1; }
@-webkit-keyframes logoIntro
{
    0% {
        -webkit-transform: scale(0, 0);
        opacity: 0;
    }
    80% {
        -webkit-transform: scale(1.4, 1.4);
    }
    90% {
        -webkit-transform: scale(1.1, 1.1);
    }
    100% {
        -webkit-transform: scale(1, 1);
        opacity: 1;
    }
}

要素 2 は次のとおりです。

   #wrapper_splashscreen #menu {
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 40px;
        background: #151515;
        -webkit-animation-name: menuIntro 1s 1; }
    @-webkit-keyframes menuIntro
    {
        0%, 30% {
            bottom: -40px;
        }
        100% {
            bottom: 0px;
        }
    }

ロゴ (要素 1) はフェードインして下に移動し、メニュー (要素 2) は何もしていません。

4

2 に答える 2

2

2 番目の要素にエラーがあります。

-webkit-animation-name: menuIntro 1s 1;

である必要があります-webkit-animation。

最初の要素の何が問題なのかわからない (fiddle/demo を追加してください)。transform -originを設定すると役立つかもしれません。

于 2013-05-31T09:59:24.643 に答える
0

アンカーでアニメーション要素に移動すると、アニメーションがバグるようです。ブラウザは移動中に要素に移動し、アニメーションが壊れます。

于 2013-05-31T09:48:44.920 に答える