CSS3アニメーションの滑らかさを改善するためのチートやヒントを持っている人はいますか？cssトランジションを使用してページ全体を左にスライドしていますが、思ったよりも少し雑然としています。単一の要素ですが、複雑なページであるため、多数の丸みを帯びた角、グラデーション、ドロップシャドウなどが含まれています。
フラッシュアクションスクリプトにはcacheAsBitmap、アニメーションが始まる前にアニメーション要素をビットマップに変換する便利なプロパティがあります。これは天の恵みであり、特定の種類のアニメーションを大幅に高速化します。CSSにこのようなものはありますか？ページデザインを簡素化せずにパフォーマンスを向上させるためのヒントは他にありますか？ハードウェアアクセラレーションを有効にしたり、アニメーションをブラウザの優先度の高いものとしてフラグを立てたりすることを考えています。
ディレクティブの前はwill-change、他の言語でできるのと同じ文字通りの方法でこれを行うことはできませんでした。ブラウザ（または少なくともWebkit）は、さまざまなレイヤーを描画することでページのレンダリングを処理しました。理論的には、レイヤーを作成するのに十分インテリジェントである必要がありますが、何かを独自のレイヤーに強制することをお勧めする場合もあります。
何が起こっているかによっては、うまくいくこともあれば、うまくいかないこともありました。
ともかく。
CSSでは、何かをレイヤーに強制する1つの方法は、3D変換を使用してそれを変換することです。一般的な戦略は、次のいずれかを追加することです。
transform: translateZ(0);
または同等のもの：
transform: translate3d(0,0,0);
または少しクレイジー：
transform: rotateZ(360deg);
または、次のものと組み合わせて翻訳します。
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
物事がちらつく場合。
これらは、仕様で定義されている新しいレイヤーを作成します。http://www.w3.org/TR/css3-transforms/#transform-propertyから、
「変換に「none」以外の値を指定すると、スタッキングコンテキストと包含ブロックの両方が作成されます。」
これらはすべて注意深いテストが必要であり、それを必要とする可能性のあるものに常にぶつかるようなものではありません。良い場合もあれば、変わらない場合もあり、悪い場合もあります。
幸運を！
以来
will-changeハードウェアアクセラレーション要素の準備をするようにブラウザに通知するために使用できます。
.drawer {
will-change: transform;
}
この
will-changeプロパティを使用すると、要素に加える可能性のある変更の種類を事前にブラウザに通知できるため、必要になる前に適切な最適化を設定できるため、重要な起動コストを回避できます。これは、ページの応答性に悪影響を与える可能性があります。要素をより速く変更およびレンダリングでき、ページをすばやく更新できるため、よりスムーズなエクスペリエンスが得られます。
詳細については、その引用の完全な記事を読むことができます。
私が読んだところによると、ドロップシャドウは現時点で最大のパフォーマンスヒットの1つです。アニメーションの開始/終了時にクラスを追加/削除して、すべてのシャドウを一時的に無効にし、移動後にフェードインして戻すことができます。
残念ながら、これは多くの制限があり、その多くは制御できません。
現在、パフォーマンスを向上させる最善の方法は、一度にアニメーション化/遷移されるものの数を制限することです。