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 の最も完全なコード分析 (ES5)

この記事では、シンプルなカルーセル効果を実現するためのJavaScriptの具体的なコードを参考まで...

JavaScript 初心者のための二分探索木アルゴリズムのチュートリアル

目次バイナリ検索木 (BST) とは何ですか?バイナリツリーの基本的な走査(インオーダー、ポストオー...

Nginxはドメイン名のアクセス方法を定義しています

最近Nginxを構築しているのですが、ドメイン名でアクセスできません。 nginx 構成ファイル n...

Nginx セッション共有問題の解決策の分析

この記事は主に、Nginx セッション共有の問題に対する解決策を紹介します。記事内のサンプル コード...

CSS3 すりガラス効果

すりガラス効果がうまく表現されていれば、ページが非常に鮮やかで立体的に見えるようになります。写真に直...

CSSはグラデーションを巧みに利用して高度な背景光アニメーションを実現します

成し遂げるこの効果は CSS を使用して完全に再現することは困難です。 CSS でシミュレートされた...

Docker を使用して Go Web アプリケーションをデプロイする方法

目次なぜ Docker が必要なのでしょうか? Docker デプロイメントの例コードの準備Dock...

React で setInterval 関数を使用する例

この記事はWindows 10のシステム環境をベースに、Reactの学習と使用について説明しています...

Linux コマンドライン操作 Baidu クラウドのファイルのアップロードとダウンロード

目次0. 背景1. インストール2. Baidu Cloudアカウントにログインする3. ファイルを...

nginx/apache 静的リソースのクロスドメインアクセスの問題を解決する詳細な説明

1. Apache 静的リソースのクロスドメイン アクセスApache設定ファイルhttpd.con...

HTML 基本構造_Powernode Java アカデミー

多くの場合、Web ページ開発を学ぶときに最初に印象に残るのは、html または htm サフィック...

js 加算、減算、乗算、除算の正確な計算方法のサンプルコード

序文コンピュータの数値は浮動小数点であるため、計算プロセス中に取得されるデータは通常正確ではなく、そ...

実行後にdocker nginxにアクセスできない問題の解決策

## 1最近、docker デプロイメントを学習しており、当初は nginx を docker 化す...

CentOS7 は rpm パッケージを使用して mysql 5.7.18 をインストールします

例示するこの記事は、2017 年 5 月 20 日に MySQL-5.7.18 を使用して作成されま...

Docker で Tomcat、MySQL、Redis をインストールするための詳細な手順

目次DockerでTomcatをインストールするtomcatイメージを使用してコンテナを作成する(イ...