1

@-webkit-keyframes反復の最後にアニメーションのちらつきを修正する方法は?

これは、Android 2 で CSS3transform値translateを使用translate3dしたアニメーションで非常に顕著opacityです。

いくつかの投稿で、それを修正するための提案に気付くかもしれません:

-webkit-transform: translate3d(0,0,0);

また

-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;

しかし、Android 2.3 でテストした後、実際に問題を解決していないことに気付きました。

4

2 に答える 2

3

George Hess は彼のブログで、それに対する実用的な修正を公開し、次のように述べています。

ちらつきは、アニメーションがほんの一瞬だけ最初のキーフレームにリセットされることによって発生します。これは、アニメーション化された CSS クラスのスタイルを現在の場所にとどめ、アニメーションの完了時に最後のキーフレームのスタイルを継承するように設定した場合でも発生します。私が思いついた唯一の解決策は、2 つ以上のキーフレームを使用することです。

たとえば、次のコードがちらつく場合:

@-webkit-keyframes 'slide-in' {
    from { -webkit-transform: translateX(100%); }
    to { -webkit-transform: translateX(0); }
}

次のように変更すると、問題が解決します

@-webkit-keyframes 'slide-in' {
    from { -webkit-transform: translateX(100%); }
    99% { -webkit-transform: translateX(0); }
    to {} /* equals `100% {}` Leave it empty to fix the flicker */
}

結論:アニメーション期間の最後を空のまま (パラメーターを設定しないでください) to {}/100% {}アニメーション パラメーターの最後に設定するか、そうでない場合は期間の横に99% {}置きます。

于 2012-07-11T09:27:55.620 に答える
0

@ Binyaminのソリューションを機能させることができませんでしたが、追加するだけで、別の問題をデバッグしながらこの問題を解決できました-webkit-animation-fill-mode: forwards;

于 2014-05-09T13:55:12.947 に答える