CSSでアニメーションが止まる問題を解決する方法

CSS3 アニメーションのスタックを解決するための解決策のまとめ

1. アニメーションにtransformを使用し、高さ、幅、マージン、パディングなどを使用しないようにしてください

その理由は次のとおりです。
定義上、CSSのtransform属性。 要素やその周囲の要素のレイアウト は変更されません。変換属性は、 要素全体の に影響を与え、要素全体を 拡大縮小、回転、移動します。

これはブラウザーにとって素晴らしいニュースです!ブラウザーは、この要素のビットマップを 1 回生成し、アニメーションの開始時に処理のために

GPU に送信するだけで済みます。その後、ブラウザーは レイアウト、描画、ビットマップの送信 操作を行う必要がなくなります。その結果、ブラウザは GPU の機能を最大限に活用して、さまざまな位置にビットマップをすばやく描画したり、回転や拡大縮小を実行したりできます。 とても遅い理由:

アニメーションのすべてのフレームで、ブラウザはレイアウト、描画を実行し、GPUに新しいビットマップを送信する必要があります。ビットマップを GPU のメモリにロードするのは比較的遅い操作であることがわかっています。
ブラウザが多くの作業を行う必要がある理由は、要素のコンテンツ

がフレームごとに常に変更されるためです。要素の高さを変更すると、その子要素のサイズを

同期的に変更する必要が生じる可能性があるため、ブラウザはレイアウトを再計算する必要があります。レイアウトが完了したら、メインスレッドは要素のビットマップを再生成する必要があります。 2. 要件が高い場合は、ブラウザを開いて GPU ハードウェア アクセラレーションを有効にすることができます。

例: 1. Chrome、FireFox、Safari、IE9+、および Opera の最新バージョンはすべて、ページ内の DOM 要素が 特定の CSS ルール

に適用されることを検出すると、オンになります。最も注目すべき機能は要素の 3D 変換です。

.cube {   
    -webkit-transform: translate3d(250px,250px,250px)
   rotate3d(250px,250px,250px,-120deg)
   scale3d(0.5, 0.5, 0.5);}

2. ただし、要素に 3D 変形効果を適用する必要がない場合もあります。では、どうすればよいでしょうか?この時点で、ちょっとしたトリックを使用してブラウザを「チート」してハードウェア アクセラレーションを有効にすることができます。

要素に 3D 変換を適用したくない場合でも、3D エンジンをオンにすることができます。たとえば、transform:translateZ(0); を使用してハードウェア アクセラレーションを有効にすることができます。

.cube {   
-webkit-transform: translateZ(0);   
-moz-transform: translateZ(0);   
-ms-transform: translateZ(0);   
-o-transform: translateZ(0);   
transform: translateZ(0);   /* Other transform properties here */}

Chrome と Safari で CSS 変換またはアニメーションを使用すると、ページがちらつく場合があります。次のコードでこの状況を修正できます:

.cube {   
-webkit-backface-visibility: hidden;   
-moz-backface-visibility: hidden;   
-ms-backface-visibility: hidden;  
backface-visibility: hidden;   
-webkit-perspective: 1000;   
-moz-perspective: 1000;   
-ms-perspective: 1000;   
perspective: 1000;   /* Other transform properties here */}

以上がCSSでアニメーションが止まる問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。