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 ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!