CSS3 の「transition: all」はアニメーションを遅くしますか?

CSS3 トランジション: "transition: all" はレンダリング速度に影響しますか?

質問:

回答:

はい、「transition: all」を使用すると確かに影響を受けます。レンダリングのパフォーマンスに悪影響を及ぼします。 「transition: all」が適用されると、ブラウザは、色や寸法の変更など、ユーザーには表示されないものも含め、適用可能なすべてのトランジション プロパティを検索します。

この追加の処理により、アニメーションが遅くなる可能性があります。ブラウザは、表示されているプロパティの遷移を計算するだけでなく、そうでない可能性のある遷移もチェックする必要があるためです。

例:

次の例では、「transition: all」を使用すると、ズーム レベルまたはフォント サイズを変更するときに不要なアニメーションが発生する可能性があります:

/* With "transition: all" */
div, span, a {
  transition: all .2s ease-in;
}

/* With specific transitions */
div {
  transition: margin .2s ease-in;
}
span {
  transition: opacity .2s ease-in;
}
a {
  transition: background .2s ease-in;
}

推奨事項:

アニメーションを最適化するにはパフォーマンスを重視する場合は、通常、「transition: all」の使用を避け、代わりに特定の遷移プロパティをターゲットにすることをお勧めします。これにより、レンダリング速度が向上するだけでなく、初期スタイルと遷移スタイルが連続して表示されるページ読み込み中のアニメーションの不要なスプラッシュも防止されます。

以上がCSS3 の「transition: all」はアニメーションを遅くしますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。