0

このアニメーションをChromeで動作させようとしています:

@-webkit-keyframes flipAnimation {
    0% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        -webkit-transform-origin: right center;
    }
    100% {
        -webkit-transform: perspective(400px) rotateY(0deg);
        -webkit-transform-origin: right center;
    }
}

@-webkit-keyframes appear {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes disappear {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.flipAnimation {
    opacity: 0;
    -webkit-backface-visibility: visible !important;
    -webkit-animation: flipAnimation .5s, appear .2s, disappear .3s;
    -webkit-animation-delay: 0s, .3s, 2s;
}

しかし、それは常にグリッチです。1 つ目は、div.flipAnimation が不透明度 0 で表示されないことです。2 つ目は、div が点滅し、最後の消えるアニメーションが適切にトリガーされないようです。同じアニメーションに 2 つの不透明度アニメーションがあると、遅延が発生しますが、問題はありますか?

4

3 に答える 3

0

これがあなたが目指している望ましい効果であるかどうかはよくわかりませんが、私の解決策を調べることができます：

JSフィドルデモ

あなたが探している効果は、では達成できないと思いますkeyframes。これで十分かどうか確認してください。

于 2012-10-04T07:22:05.790 に答える
0

これはキーフレームだけではできないようです。jquery を使用して、最終的なフェード アウト アニメーションを実行します。

于 2012-10-04T09:03:25.187 に答える
0

ここでコードが機能します。 Demo Jsfiddle が動作しなかった理由は遅延時間です。あなたは違いを見ることができませんでした。だから私はあなたがそれがうまくいっているのを見るために10秒の遅延時間を変更します。 あなたのコードは他の遅延で動作します

コードを変更して、それが機能することを確認します。リクエストに応じて時間とその他のことを変更するだけです。

最初に、flipAnimationu が表示され、20 秒後に一緒に動作するのを確認します。20 秒後には、動作が消え、色が紺碧、黒、紺碧に変わります。

于 2012-10-04T07:35:48.580 に答える