CSS シャドウアニメーションの最適化のヒント

CSS シャドウアニメーションの最適化のヒント

このテクニックは、この記事から来ています - シルキーでスムーズなパフォーマンスでボックスシャドウをアニメーション化する方法

この記事は直訳ではありませんが、この技術は非常に興味深く、有用だと思ったので書きました。

私たちの作品ではbox-shaodwますます多く使われており、それに伴うシャドウのアニメーションも多かれ少なかれ存在しています。次のようなボックスがあるとします。

div {
    幅: 100ピクセル;
    高さ: 100px;
    ボックスの影: 0 2px 4px rgba(0, 0, 0, 0.3);
}

ホバーすると、ボックスの影がbox-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)からbox-shadow: 0 5px 15px rgba(0, 0, 0, 0.3)に変化することを期待します。

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) --> box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3)

はい、もちろん最も簡単な方法は次のとおりです。

div:ホバー{
    幅: 100ピクセル;
    ボックスの影: 0 5px 15px rgba(0, 0, 0, 0.3);
}

遷移アニメーションは 2 つの異なるボックス シャドウ状態で発生するため、ブラウザは遷移アニメーションの間もボックス シャドウを再描画し続けます。また、影はパフォーマンスを集中的に使用するスタイルであるため、この種のアニメーションは多少遅れているように感じられます。

この場合に影のアニメーションを最適化するためのちょっとしたコツを紹介します。

疑似要素と透明度で最適化する

最適化のために疑似要素と透明度を使用して、親 div と同じサイズの before 疑似要素を上記の要素に追加し、必要な最終ボックス シャドウ状態をこの要素に事前に追加しますが、要素の透明度は 0 です。

div {
    位置: 相対的;
    幅: 100ピクセル;
    高さ: 100px;
    ボックスの影: 0 2px 4px rgba(0, 0, 0, 0.3);
}
 
div::before {
    コンテンツ: "";
    位置: 絶対;
    上: 0;
    左: 0;
    幅: 100%;
    高さ: 100%;
    ボックスの影: 0 5px 15px rgba(0, 0, 0, 0.3);
    不透明度: 0;
}

次に、ホバー時に、疑似要素の不透明度を 0 から 1 に設定するだけです。

div:hover::before {
    不透明度: 1;
}

これを行う利点は、実際の影の変化は透明度の変化だけであり、影を常に再描画する必要がないため、影のアニメーションの滑らかさが効果的に向上し、より滑らかに見えることです。

opacityアニメーション化するとbox-shadowアニメーション化するよりもパフォーマンスが向上するのはなぜですか?さまざまな属性の変更がページのリフローと再描画に与える影響をリストした次の表をご覧ください。

CSSプロパティが非常に少ない

最後に、デモをご覧ください:

CodePen デモ - ボックスシャドウアニメーションの最適化

既存の問題、別の解決策

元のテキストにある上記の解決策は、最終的な効果として 2 つの影が重ね合わされ、全体的な影の色が少し暗くなる可能性があるため、実際には完璧ではありません。

そのため、最終的な影を微調整し、効果を少し弱めて、2 つの影の重ね合わせた効果が 1 つの影のそれに近づくようにする必要があります。

もちろん、上記のソリューションをさらに最適化することもできます。別の::after疑似要素を使用し、 ::after疑似要素を不透明度 1 の初期状態に設定し、 ::before疑似要素を不透明度 0 の終了状態に設定します。

ホバーすると、2 つの疑似要素のうち 1 つが表示され、もう 1 つは非表示になります。このように、最終的な効果は影の重ね合わせのない 1 つの影効果のみとなり、これは影を直接遷移させるのと同じです。

CodePen デモ - ボックスシャドウアニメーションの最適化

要約する

上記はエディターが紹介した CSS シャドウアニメーションの最適化テクニックです。皆様のお役に立てれば幸いです。ご質問がございましたら、メッセージを残していただければ、エディターがすぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<:  ウェブページの画像を素早く表示する方法とテクニック

>>:  vue data が関数である理由をご存知ですか?

推薦する

JavaScript でプロパティハイジャックを実装する方法 defineProperty

目次序文記述子getとsetの詳細な説明オブジェクトの属性の乗っ取りオブジェクトのすべてのプロパティ...

JS デコレータ パターンと TypeScript デコレータ

目次デコレータパターンの紹介TypeScript のデコレータデコレータの使用デコレーターファクトリ...

Linuxサーバー間のリアルタイムファイル同期の実現

使用シナリオ既存のサーバー A と B の場合、サーバー A の指定されたディレクトリ (たとえば、...

Vue の大容量ファイルアップロードとブレークポイント再開アップロードの実装

目次ファイルアップロードのための2つのソリューションファイルストリーム(フォームデータ)に基づくクラ...

Linux 負荷分散 LVS の詳細な理解

目次1. LVS 負荷分散2. 負荷分散LVSの基本紹介3. LVSアーキテクチャ3.1 ロードバラ...

Baota LinuxパネルにFTP接続できない問題の解決方法の詳細な説明

Alibaba Cloud Server を使用している場合は、セキュリティ グループ設定でポート ...

OpenLayers 3 のベクターマップソースの読み込みの問題を解決する

1. ベクターマップベクター グラフィックスは直線と曲線を使用してグラフィックスを表します。これらの...

JavaScript のドキュメント オブジェクト モデル (DOM)

目次1. DOMとは何か2. 要素を選択する3. getElementById() 4. クエリセレ...

nginx は画像表示の遅さとダウンロードの不完全さの問題を解決します

前面に書かれた最近、ある読者から、ブラウザからサーバーにアクセスすると、画像の表示が遅く、ブラウザに...

JSは文字列内の指定された文字列のn番目の出現位置を取得します

文字の位置を取得するための同様の方法について学習します。 charAt() 文字列内の指定された位置...

Win7 の VMware 仮想マシンに Linux7.2 をインストールするインターネット アクセス構成チュートリアル

参考までに、win7システム上のVMware仮想マシンにlinux7.2インターネットアクセス構成を...

MySQL の制限ページング最適化ソリューションの実装に関する簡単な説明

MySQL のページングステートメントの使用制限Oracle や MS SqlServer と比較す...

MySQL は重複データを削除して最小の ID ソリューションを維持します

オンラインで検索して重複データを削除し、ID が最小のデータだけを残します。方法は次のとおりです。 ...

JQuery データグリッドクエリの詳細な説明

目次ツリー項目にコードを追加します。 1. 右側に関連情報ページを保存します(userManage....

Linux での JDK と Tomcat のアップロードと設定に関する詳細なチュートリアル

準備1. 仮想マシンを起動する2. gitツールルートアカウントでログインルートアカウントを使用して...