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

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

このガイドは、HTMLとCSSアニメーションの実用的な知識(shí)を持つフロントエンド開発者を?qū)澫螭趣筏皮い蓼埂?

キーテイクアウト

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

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

パフォーマンスを最適化するために、開発者はいくつかのテクニックを採(cǎi)用できます。これらには、オフセット値を変更するのではなく、影の不透明度のみをアニメーション化することが含まれます。複數(shù)のBox-Shadowレイヤーを使用します。影を提供する擬似要素をアニメーション化します。これにより、再塗裝の量と全體的なCPUワークロードが大幅に削減されます。
• Shadow Animationsを最小限に抑え、インタラクティブな要素をアニメーション化してCPUワークロードを減らすことが重要です。影のアニメーションが必要な場(chǎng)合、開発者は、深さの視覚的魅力と不透明度のみを変更することのパフォーマンスの利點(diǎn)との間のトレードオフを比較検討する必要があります。また、影を提供する疑似要素をアニメーション化するために必要な追加のコードを考慮する必要があります。
• なぜこれが重要なのか
Webページには、理想的には5秒未満の非常に短いロード時(shí)間が必要です。調(diào)査では、迅速なページの読み込みが変換率を大幅に向上させることを示しています。さらなる調(diào)査によると、ユーザーの70％がウェブサイトの速度がオンラインストアから購(gòu)入する意欲に影響を與えると答えています?；镜膜恕⒏咚佶单ぅ趣闲窑护圣姗`ザーに匹敵します
• さらに進(jìn)む前に、Box-ShadowアニメーションがWebページで機(jī)能する方法のデモを次に示します。 Web要素をスクロールして対話できます。
ペンを參照してください

SitePoint（@SitePoint）

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

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

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

• 絵。絵畫では、ブラウザはピクセルを色で埋め、Box-ShadowはこのイベントをトリガーするCSSプロパティの1つです?；镜膜恕ⅳ饯欷膝ⅴ衰岍`ションのすべてのフレームに新しい影を作成します。 Mozillaによると、理想的なCSSアニメーションは60fpsで実行されるはずです。

レイアウト。一部のアニメーションは、ページの構(gòu)造を変更し、多くのスタイルの再計(jì)算につながる可能性があります。良い例は、拡張時(shí)に他の要素を邪魔にならないようにサイドバーです。これを引き起こすCSSプロパティには、パディング、マージン、境界線が含まれます。
• 単純に言えば、アニメーション化されたプロパティが他の要素に影響する場(chǎng)合、ページのレイアウトを変更し、再計(jì)算を引き起こします。これは多くのシステムリソースを使用します。

  compositing。合成では、ページの一部のみが変更されます。不透明度や変換などのCSSプロパティは、適用される要素のみに影響します。これは、スタイルの再計(jì)算が少なく、アニメーションがスムーズになることを意味します。合成は、3つすべてのうち最も少ないタスクプロセスです。

• ブラウザのインス??ペクターツールを使用すると、このプロセスをリアルタイムで観察できます。まず、Inspectorツールを開き（Chromeは下の寫真）、タブの右上隅にある3つのドットをクリックします。より多くのツールを確認(rèn)し、レンダリングを選択します

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

navbar：

テキストカード：

• 
  navリンク：
• 
  
シャドウを持つすべての要素が、その上にホバーするとき、またはページを更新するときに緑色にフラッシュすることがわかります。レイアウトで同じ実験を行うこともできます。ペイントの點(diǎn)滅をチェックして、レイアウトシフト領(lǐng)域を選択してください。
• 
  塗裝の點(diǎn)滅はCodepen Demosでは機(jī)能しない可能性があるため、テキストエディターのライブプレビューでこれを試してみてください。以下のビデオは、あなたが見るべきものを示しています

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

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

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

ボックスシャドウには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>

ここに結(jié)果があります：

<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で。

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

この0.5Sアニメーションを?qū)g行しているときに、舞臺(tái)裏で何が起こっているのかを見てみましょう。ブラウザでは、右クリックして検査を選択して開発者ツールを開きます。ツールが開いたら、[パフォーマンス]タブに移動(dòng)します。 Shadow Animationを録音できます。何が起こっているのかを見るにはほんの數(shù)秒で十分です。

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

シャドウのアニメーション期間は上下にホバリングされ、上部で強(qiáng)調(diào)表示され、行われるプロセスの內(nèi)訳が下部に表示されます。故障は、スクリプトに7msかかり、レンダリングに55分かかり、塗裝が30ms続くことを示しています。 今、それらの數(shù)字は大丈夫そうですが、CPUが4倍遅いときにどうなりますか？ [パフォーマンス]タブからCPU速度をスロットすることができます。

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

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

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

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

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

以下について説明します

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

複數(shù)のボックスシャドウレイヤーがあります
擬似要素のアニメーション
2. transformプロパティを使用して
3. 不透明度をアニメーション化します
4. RGBA色を使用する場(chǎng)合、アルファチャネルは不透明度を制御します。シャドウをアニメーション化するときにアルファチャンネルのみを変更すると、CPUではシャドウのオフセットと広がり値を変更するほど難しくありません。
最初のアニメーションでは、影の不透明度だけが変化していますが、2番目ではYオフセットは10pxから20pxに変化し、スプレッドは20pxから40pxに変化しています。

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

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

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

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

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

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

ペンを參照してください

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

Codepenで。

階層された影

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

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

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

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

違いは明らかです。階層化された影は、見栄えの良い影の効果を生み出すだけでなく、アニメーション化するときに驚くほど優(yōu)れたパフォーマンスを発揮します。レンダリングは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の絵畫があります。 最終的に、あなたの影がどのように見えるか、そしてそれを作成するためにどのような方法を使用するかを決定するのはあなた次第です。

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

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

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

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

さて、あなたがしなければならないのは、擬似要素の不透明度を変更することだけです：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で。

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

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

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

transformプロパティを使用して

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

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

いくつかの便利なヒント

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

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

結(jié)論

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

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

最後のオプションは、ボックスシャドウではなく、影を提供する擬似要素をアニメーション化することです。これにより、再塗裝の量とCPUがアニメーションを?qū)g行する際に行う全體的な作業(yè)が大幅に削減されます。あなたはより多くのコードを書きますが、それは良いパフォーマンスを確保するためのあなたの最善の策です。

関連コンテンツ：

CSSの要素を非表示にする10の方法

book：

cssマスター

CSSのREM：REMユニットを理解して使用しています

• CSS Box-shadow
に関する
• FAQ
• CSSのBox-Shadowとは何ですか？ box-shadowは、要素の影の作成を可能にするCSSプロパティです。要素のボックス全體にシャドウエフェクトを追加して、視覚的な外観を強(qiáng)化することができます。
  Box-Shadowプロパティの値はどういう意味ですか？

  値は次のことを表します：水平オフセット：影の水平距離。
  垂直オフセット：影の垂直距離。 ：オプション。影を広めるべき量。
  色：影の色。
  はい、各影をコンマで分離することで複數(shù)の影を適用できます。
  es、div、段落、ヘッダーなどのほとんどのHTML要素にボックスシャドウを適用できます。これは、要素の視覚的なプレゼンテーションを強(qiáng)化するための多用途のプロパティです。 Box-Shadowを使用する際のパフォーマンスの考慮事項(xiàng)？

  ボックスシャドウの過(guò)度の使用、特に大きなぼやけの値では、パフォーマンスに影響を與える可能性があります。特に強(qiáng)力なデバイスでは、スムーズなユーザーエクスペリエンスを維持するためにシャドウを慎重に使用することをお?jiǎng)幛幛筏蓼埂?/em>

以上がCSSボックスの影をアニメーション化し、パフォーマンスを最適化する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。