滑らかな「ボックスシャドウ」アニメーション効果を実現する方法_html/css_WEB-ITnose

フレームごとに再描画したり、ページのパフォーマンスに深刻な影響を与えたりすることなく、CSS で box-shadow プロパティをアニメーション化するにはどうすればよいでしょうか?答えは「達成できない」です。 box-shadow でのアニメーション化された変更はパフォーマンスに悪影響を与える可能性があるためです。

上記の問題を解決する簡単な方法を次に示します。再描画を最小限に抑えたい場合は、擬似要素を作成し、その不透明要素をアニメーション化して、1 秒あたり 60 フレームでアニメーション化して、移動オブジェクトと同じ効果を模倣する必要があります。

例

この例をよく見て、そこで使用したさまざまなテクニックを比較してください。 2 つの効果は同じに見えると思いますか?唯一の違いは、影を適用してアニメーション化する方法です。左側の例では、マウスホバー時にボックスシャドウをアニメーション化します。右側の例では、::after を使用して疑似要素を追加し、それに影を設定し、要素の不透明要素をアニメーション化します。

開発ツールを使用してこれらのいずれかを試してみると、次のようなものが表示されるはずです (緑色のバーは描画されていることを意味し、少ないほど良いです):

右側にカーソルを置いたカード (擬似要素の不透明度でアニメーション) と比較して、左側のカード (ボックスの影でアニメーション) をマウスオーバーすると、より多くの再描画があることが明らかです。

なぜこのような効果が見られるのでしょうか? CSS プロパティのうち、 opacity と transform など、アニメーション化されたときにフレームごとに一定の再描画がトリガーされないものはほとんどありません。再描画 (ブラウザが行う必要がある作業) を最小限に抑えるために、アニメーションではこれら 2 つのプロパティのみを変更することを推奨します。

他のレイアウト スタイルはさておき、これが これら 2 つのテクノロジーの主な違い ︰

/* The slow way */.make-it-slow {  box-shadow: 0 1px 2px rgba(0,0,0,0.15);  transition: box-shadow 0.3s ease-in-out:}/* 鼠标悬停实现更大阴影的过渡 */.make-it-slow:hover {  box-shadow: 0 5px 15px rgba(0,0,0,0.3);}/* The fast way */.make-it-fast {  box-shadow: 0 1px 2px rgba(0,0,0,0.15);}/* 设置更大的阴影并将之隐藏 */.make-it-fast::after {  box-shadow: 0 5px 15px rgba(0,0,0,0.3);  opacity: 0;  transition: opacity 0.3s ease-in-out:}/* 鼠标悬停时实现更大阴影的过渡显示 */.make-it-fast:hover::after {  opacity: 1;}

詳細な内訳

上記に基づくそれはさておき、上の例で示した 3D カード効果を作成する方法を見てみましょう。最初のステップは、上で行ったのと同じように、シャドウを擬似要素に転送することです。また、作成したすべてのカードにレイアウト コードを追加しましょう:

/* 创建一个简单白色盒子,并添加阴影 */.box {  position: relative;  display: inline-block;  width: 100px;  height: 100px;  border-radius: 5px;  background-color: #fff;  box-shadow: 0 1px 2px rgba(0,0,0,0.15);  transition: all 0.3s ease-in-out;}/* 创建隐藏的伪元素 *//* 最终样式包含阴影 */.box::after {  content: '';  position: absolute;  z-index: -1;  width: 100%;  height: 100%;  opacity: 0;  border-radius: 5px;  box-shadow: 0 5px 15px rgba(0,0,0,0.3);  transition: opacity 0.3s ease-in-out;}

これら 2 つの要素をアニメーション化したいため、transition 要素を .box と .box::after に追加していることに注意してください。 .box と .box::after への不透明要素

これらのスタイルは、微妙なボックスシャドウ スタイルを持つ白いボックスを示しています。ここでは、 .box::after のシャドウは完全に非表示になっており、ボックス効果と相互作用することはできません。

デモと同じ効果を作成するには、次に行う必要があるのは、マウスが .box 上にあるときに拡大効果を作成し、擬似要素と影にフェードを実装することです。

/* 放大盒子 */.box:hover {  transform: scale(1.2, 1.2);}/* 伪元素更大阴影的淡化 */.box:hover::after {  opacity: 1;}

とにかく、これは、さまざまなブラウザーの互換性のあるスタイルといくつかの追加のカスタム イージング効果を含むすべての CSS スタイルです:

.box {  position: relative;  display: inline-block;  width: 100px;  height: 100px;  background-color: #fff;  border-radius: 5px;  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);  border-radius: 5px;  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);}.box::after {  content: "";  border-radius: 5px;  position: absolute;  z-index: -1;  top: 0;  left: 0;  width: 100%;  height: 100%;  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);  opacity: 0;  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);}.box:hover {  -webkit-transform: scale(1.25, 1.25);  transform: scale(1.25, 1.25);}.box:hover::after {    opacity: 1;}

適用された box-shadow を使用するだけと比較すると、明らかにここです。同じアニメーション効果を実現するために多くの CSS が使用され、パフォーマンスが向上しました。なぜわざわざ？

デスクトップがボックス シャドウ アニメーションを問題なく処理できるとしても、携帯電話もおそらく問題なく処理できません。しかし、より複雑なレイアウトに取り組むと、デスクトップに症状が現れ始めることがあります。

トランジションとアニメーションにのみ変換要素と不透明度要素を適用し続けると、最高のパフォーマンス、つまり最高のユーザー エクスペリエンスが達成されます。

この記事は、@Tobias 氏の「How to animate "box-shadow" with Silky Smooth Performance」を基に翻訳したものであり、翻訳が不十分な場合や、翻訳内容に独自の解釈が含まれています。間違っています 同僚にアドバイスを求めてください。この翻訳を転載したい場合は、英語の出典を明記してください: http://tobiasahlin.com/blog/how-to-animate-box-shadow/。

Jingzi

現役学生、コンピューターサイエンスを専攻する学部生。積極的で笑いが大好きな女の子。フロントエンドが大好きで、他の人とコミュニケーションしたり共有したりするのが好きです。自分の心の中の自分を自分の努力で実現したいと思っています。 Weibo: @京-如秋叶