ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSボックスの影をアニメーション化し、パフォーマンスを最適化する方法

CSSボックスの影をアニメーション化し、パフォーマンスを最適化する方法

Joseph Gordon-Levittオリジナル: 2025-02-11 08:24:10930ブラウズ

この記事では、ブラウザのパフォーマンスを低減せずにCSSボックスシャドウをアニメーション化する方法を学びます。

CSSでは、Box-Shadowプロパティを使用してWeb要素に影を追加し、これらの影をアニメーション化できます。ただし、Shadow Animationsはブラウザのパフォーマンスに影響を与える可能性があり、ページをレンダリングするときに遅れをとることがあります。

このガイドは、HTMLとCSSアニメーションの実用的な知識を持つフロントエンド開発者を対象としています。

キーテイクアウト

CSSボックスシャドウのアニメーションは、ブラウザのパフォーマンスに影響を与える可能性があり、ページレンダリング中に遅れをとる可能性があります。したがって、これらのアニメーションを最適化して、ページの読み込み時間をクイックに維持することが重要です。これは、ユーザーの満足度と変換率の重要な要素です。

CSS Box-Shadowアニメーションは、絵画、レイアウト、および合成の3つの主要なプロセスをトリガーします。ブラウザが色でピクセルを埋めることを含む絵画は、最もリソース集約型です。ページの構造を再計算することを伴うレイアウトの変更も、重要なリソースを消費します。ページの一部にのみ影響する合成は、最も要求の少ないプロセスです。

Shadow Animationsを最小限に抑え、インタラクティブな要素をアニメーション化してCPUワークロードを減らすことが重要です。影のアニメーションが必要な場合、開発者は、深さの視覚的魅力と不透明度のみを変更することのパフォーマンスの利点との間のトレードオフを比較検討する必要があります。また、影を提供する疑似要素をアニメーション化するために必要な追加のコードを考慮する必要があります。
なぜこれが重要なのか
さらに進む前に、Box-ShadowアニメーションがWebページで機能する方法のデモを次に示します。 Web要素をスクロールして対話できます。

SitePoint（@SitePoint）

によるShadow Animationを備えたWeb要素 Codepenで。

3つの主要なCSSボックスシャドウアニメーションイベント

舞台裏で何が起こっているのか、CSSボックスシャドウアニメーションはリソースが多い場合があります。 Box Shadow Animation（またはあらゆる形態のアニメーションなど）にトリガーされる3つの主要なプロセスまたはイベントがあります。これらのイベントは、絵画、レイアウト、および合成です

絵。絵画では、ブラウザはピクセルを色で埋め、Box-ShadowはこのイベントをトリガーするCSSプロパティの1つです。基本的に、それはアニメーションのすべてのフレームに新しい影を作成します。 Mozillaによると、理想的なCSSアニメーションは60fpsで実行されるはずです。
単純に言えば、アニメーション化されたプロパティが他の要素に影響する場合、ページのレイアウトを変更し、再計算を引き起こします。これは多くのシステムリソースを使用します。

compositing。合成では、ページの一部のみが変更されます。不透明度や変換などのCSSプロパティは、適用される要素のみに影響します。これは、スタイルの再計算が少なく、アニメーションがスムーズになることを意味します。合成は、3つすべてのうち最も少ないタスクプロセスです。
ブラウザのインスペクターツールを使用すると、このプロセスをリアルタイムで観察できます。まず、Inspectorツールを開き（Chromeは下の写真）、タブの右上隅にある3つのドットをクリックします。より多くのツールを確認し、レンダリングを選択します

この例では、ペイントフラッシュが選択されます。絵画イベントがあるたびに、画面は緑色にフラッシュされます：

navbar： CSSボックスの影をアニメーション化し、パフォーマンスを最適化する方法

テキストカード：

navリンク：
塗装の点滅はCodepen Demosでは機能しない可能性があるため、テキストエディターのライブプレビューでこれを試してみてください。以下のビデオは、あなたが見るべきものを示しています

目標は、より多くのシステムリソースを使用するため、塗装とレイアウトの変更を最小限に抑えることです。

パフォーマンスのチェック

開発者として、高速コンピューターがあるため、シャドウアニメーションを実行する問題がない場合があります。ただし、PCSが遅く、信頼できないインターネット接続を持つユーザーを考慮する必要があります。コンピュータで見栄えが良いからといって、他の場所と同じであるというわけではありません。

ボックスシャドウには4つの値と色があります。これらの4つの値は、それぞれシャドウの水平位置（X-オフセット）、垂直位置（Yオフセット）、広がり、およびぼやけた半径です。典型的な影のアニメーションには、これらの値の1つ以上の変更が含まれます。

HTMLから始まるシンプルなボックスシャドウアニメーションを作成しましょう：

<span>box-shadow: <x-offset> <y-offset> <spread> <blur> <color>;
</span>

そして、これが初期と最終的な影のためのいくつかのCSSです：

<span><span><span><body</span>></span>
</span>  <span><span><span><div</span> class<span>="box"</span>></span><span><span></div</span>></span>
</span><span><span><span></body</span>></span>
</span>

ここに結果があります：

<span><span>.box</span> {
</span>  <span>box-shadow: 0px 5px 10px 0px <span>rgba(0, 0, 0, 0.5)</span>;
</span>  <span>transition: transform ease 0.5s, box-shadow ease 0.5s;
</span><span>}
</span><span><span>.box:hover</span> {
</span>  <span>transform: translateY(-5px);
</span>  <span>box-shadow: 0px 10px 20px 2px <span>rgba(0, 0, 0, 0.25)</span>;
</span><span>}
</span>

ペンを参照してください

Animated Box-Shadow by SetePoint（@SitePoint）

Codepenで。

アニメーションの場合、Yオフセット、ぼやけ、広がりの値を変更しています。また、より透明な最終的な影を持っています。

この0.5Sアニメーションを実行しているときに、舞台裏で何が起こっているのかを見てみましょう。ブラウザでは、右クリックして検査を選択して開発者ツールを開きます。ツールが開いたら、[パフォーマンス]タブに移動します。 Shadow Animationを録音できます。何が起こっているのかを見るにはほんの数秒で十分です。

下のスクリーンショットは、ChromeのDevtoolsから見つけられるものを示しています。

シャドウのアニメーション期間は上下にホバリングされ、上部で強調表示され、行われるプロセスの内訳が下部に表示されます。故障は、スクリプトに7msかかり、レンダリングに55分かかり、塗装が30ms続くことを示しています。 CSSボックスの影をアニメーション化し、パフォーマンスを最適化する方法今、それらの数字は大丈夫そうですが、CPUが4倍遅いときにどうなりますか？ [パフォーマンス]タブからCPU速度をスロットすることができます。

次の画像は、CPUが遅くなって同じアニメーションを実行したときに何が起こるかを示しています。

この新しいプロセスでは、ロードには6msがかかります。スクリプトは最大52msで、レンダリングは117msに2倍以上になり、塗装は72msです。また、ネットワーク速度をスロットルすることができ、CPUをさらに遅くすることもできます。 Shadow Animationsは多くのシステムリソースを使用しています。負荷の一部を取り除くようになります。

変換プロパティは、CPUのパフォーマンスの一部を果たしていることに注意することが重要です。これについては後で詳しく説明します。

最適なパフォーマンスを維持する方法

Webページで影をアニメーション化する必要がある場合は、パフォーマンスを向上させる価値があります。このセクションでは、パフォーマンスのヒットを減らすために、シャドウアニメーションを微調整できるさまざまな方法を学びます。

以下について説明します

不透明度をアニメーション化します

transformプロパティを使用して
不透明度をアニメーション化します
RGBA色を使用する場合、アルファチャネルは不透明度を制御します。シャドウをアニメーション化するときにアルファチャンネルのみを変更すると、CPUではシャドウのオフセットと広がり値を変更するほど難しくありません。

そして、これらのパフォーマンスは、6倍のスローダウン（したがって、パフォーマンスグラフをはっきりと見ることができます）で、不透明度だけが変化しているアニメーションから始めます。

ボックスの上と外れに約2秒かかります。これを2番目の影のアニメーションと比較してください。

<span>box-shadow: <x-offset> <y-offset> <spread> <blur> <color>;
</span>

繰り返しになりますが、2秒のオンとオフで、すべてのイベントの時間が顕著に増加しています。塗装は96ms前でしたが、現在は187ミリ秒に倍増しています。合成の一部であるレンダリングも97msから178msまで上昇しています。

したがって、影の不透明度のみを変更すると、よりパフォーマンスのあるアニメーションが生成されます。 CSSボックスの影をアニメーション化し、パフォーマンスを最適化する方法

これら2つのアニメーションのライブデモです。

CSSボックスの影をアニメーション化し、パフォーマンスを最適化する方法

ペンを参照してください

アニメーション化された不透明度とSitePointによるアニメーションオフセット（@SitePoint）

Codepenで。

階層された影

テーブルの周りの影を観察したり、その上のオブジェクトを持ち上げたりすると、その最も暗い影領域がオブジェクトに最も近く、外側に広がるにつれてますます軽くなります。この効果を複製するのは、1つのボックスシャドウで簡単ではありません。階層化された影はずっと良く見えます。また、追加された影のレイヤーがあっても、よりパフォーマンスのあるアニメーションも生成します。

単一のボックスシャドウと多層影のパフォーマンスを比較しましょう。

このアニメーションには148msのレンダリングと133msの絵画があります。

次に、2つのボックスシャドウレイヤーを備えた影のアニメーションを手にしましょう。

違いは明らかです。階層化された影は、見栄えの良い影の効果を生み出すだけでなく、アニメーション化するときに驚くほど優れたパフォーマンスを発揮します。レンダリングは148msから74msに減少しており、塗装は133msから74msにも減少しています。

これが比較された2人のライブデモです。

ペンを参照してください

SitePoint（@SitePoint）によるシングルシャドウvsレイヤードシャドウアニメーション
Codepenで。

さあ、アニメーション中に2番目の影を追加して、違うことを試してみましょう。

<span>box-shadow: <x-offset> <y-offset> <spread> <blur> <color>;
</span>

アニメーション中に2番目のシャドウレイヤーを追加することは、最初から2つのレイヤーを持つほどパフォーマンスがありませんが、シングルボックスシャドウアニメーションの133msと比較して100msの絵画があります。 CSSボックスの影をアニメーション化し、パフォーマンスを最適化する方法最終的に、あなたの影がどのように見えるか、そしてそれを作成するためにどのような方法を使用するかを決定するのはあなた次第です。

擬似要素のアニメーション

今回は、Box-Shadowプロパティを変更せずにShadow Animationを複製します。以前のデモから、Shadow Animationの間にまだ多くの再塗装が行われていることがわかります。 Box-Shadow値を変更した場合、このプロセスを回避することはできません。

このセクションの最後に、絵画がほぼ完全に排除されることがわかります。より多くのコードが含まれますが、よりパフォーマンスのあるシャドウアニメーションを実現します。

だから、ボックスの基本的なスタイリングの後、擬似要素の後に作成して、アニメーション後の最終的な影の状態になります：

さて、あなたがしなければならないのは、擬似要素の不透明度を変更することだけです：HOVER：

通常の影のアニメーションと一緒に見てみましょう。

<span><span><span><body</span>></span>
</span>  <span><span><span><div</span> class<span>="box"</span>></span><span><span></div</span>></span>
</span><span><span><span></body</span>></span>
</span>

ペンを参照してください

<span><span>.box</span> {
</span>  <span>box-shadow: 0px 5px 10px 0px <span>rgba(0, 0, 0, 0.5)</span>;
</span>  <span>transition: transform ease 0.5s, box-shadow ease 0.5s;
</span><span>}
</span><span><span>.box:hover</span> {
</span>  <span>transform: translateY(-5px);
</span>  <span>box-shadow: 0px 10px 20px 2px <span>rgba(0, 0, 0, 0.25)</span>;
</span><span>}
</span>

SitePointによるPsuedo Shadow（@sitepoint）

Codepenで。

ここで視覚的に進むことはあまりありません。本当の違いは、彼らのパフォーマンスです。通常のBox-Shadowアニメーションの結果を以下に示します。

レンダリング時間は230ミリ秒、塗装には211msがあります。今、擬似シャドウアニメーション。

今回は、148ミリ秒のレンダリングと51msの塗装しかありません。もっとコードがありますが、結果は手間がかかる価値があります。

transformプロパティを使用して

これは主に主な要素であるボックスに当てはまります。変換プロパティを使用すると、マージンなどのレイアウトを変更する代わりに、スタイルの再計算量が減少します。

このプロパティは、翻訳またはスケールのプロパティとともに使用して、要素をページから持ち上げて、深さの幻想を作成できます。

いくつかの便利なヒント

ボックスシャドープロパティを含むアニメーションがパフォーマンスに影響を与えることがすでに確立されています。したがって、CSSボックスシャドウアニメーションが必要な場合は、留意するための便利なヒントをいくつか紹介します。

最初に、最小限に抑えます。そのためにすべての要素に影を投げないでください。第二に、インタラクティブな要素のみをアニメーション化します。機能がないものをアニメーション化する必要はありません。これにより、CPUのワークロードが削減され、パフォーマンスが大幅に向上します。

結論

シャドウはサイトを視覚的に強化することができますが、特にアニメーションに関してはパフォーマンスにも影響します。この記事では、影のアニメーションに関するさまざまな方法をテストし、そのパフォーマンスを比較しました。シャドウをアニメーション化すると、3つのイベント（塗装、レイアウトの変更、合成）がトリガーされ、最初のイベントが最もタスクです。

理想的な解決策は、シャドウをまったくアニメーション化しないことです（彼らはそうであるように見えるからです！）。 Box-Shadowプロパティを本当にアニメーション化したい場合は、オフセット値を変更するのではなく不透明度だけを変更すると、塗り直しが減少します。キャッチは、影が提供することを意図している深さの幻想を失うことです。別のアプローチは、2つのボックスシャドウレイヤーをアニメーション化することです。このソリューションは、余分な影があっても視覚的に心地よく、パフォーマンスがあります。

CSSボックスの影をアニメーション化し、パフォーマンスを最適化する方法

によるShadow Animationを備えたWeb要素 Codepenで。

3つの主要なCSSボックスシャドウアニメーションイベント

最適なパフォーマンスを維持する方法

次に、2つのボックスシャドウレイヤーを備えた影のアニメーションを手にしましょう。

関連記事