17
25

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

CSSアニメーションを実装する上で気を付けたいパフォーマンスの話し

Last updated at Posted at 2023-07-28

はじめに

Safariで、css filter(blur)をかけるとなぜか表示されなかったので対処法を書きます。
理由としては要素にハードウェアアクセラレーションが効いていないことが原因で、
要素にGPUレイヤーを作成すれば大丈夫なので、GPUレイヤーを作成するようSafariに促します。

対策1. will-changeプロパティを使う

will-changeプロパティを設定することでGPUレイヤーを作成する事ができます。

.lp_hero__main::before,
.lp_hero__main::after {
  filter: blur(100px);
  will-change: filter;
}

対策2. transformを使用する

transformプロパティを設定することでGPUレイヤーを作成する事ができます。

.lp_hero__main::before,
.lp_hero__main::after {
  filter: blur(100px);
  transform: translateZ(0);
}

実装後(after)の画像ではちゃんと薄い青色のブラーが適用されているのが確認できます。
Group 11.png

なぜ、will-changetransformを設定することで解決できたのか。
「はじめに」で書かれていたGPUレイヤー、ハードウェアアクセラレーションについてもう少し深掘ってみます。

GPUレイヤーとは?

GPU(Graphics Processing Unit)は画像処理装置と呼ばれ、CPUの指令で画像処理を行います。CPUとGPUの違いを理解するためには「CPUの指令で画像処理を行い」という点がポイント。例えば3Dグラフィックや写真の画像をパソコンに表示させるためには、画像処理の計算が必要になります。文字情報とちがって画像は情報量が多く、膨大な計算が必要。だから、専用の処理装置GPUが登場するというわけです。
makuring.com 【3分でわかる】CPUとGPUの違いをやさしいたとえ話で解説!より引用

GraphicLayer は GPU で処理されるレイヤーのことで、Chrome の DevTools 実際で確認することができます。

ハードウェアアクセラレーションとは?

描画処理を GPU に任せる行為は「ハードウェアアクセラレーション」と呼ばれます。
will-change: filter;もしくは transform: translateZ(0);を指定するとハードウェアアクセラレーションが有効になり、GPUを使って描画が行われます。要素のアニメーションがカクツク場合、ハードウェアアクセラレーションを有効しましょう。

レイヤー(GPU)の生成について

ChromeのDevToolsで確認してみましょう。
Control+Shift+IでDevToolsを開き画像の手順に沿って、レイヤの項目を選択
Group 6.jpg

↓ レイヤタブが追加され、レイヤー生成図が表示されます。
ANYTEAMのaboutページで確認してみます。
Group 7.jpg

↓ 実際にGPUレイヤーの生成を確認しましょう。

will-change: transform の適応
div.header が #document とは別にレイヤー化され浮いているのが分かります。
Group 9.jpg

transform: translateZ(0) の適応
div.footer が #document とは別にレイヤー化され浮いているのが分かります。
Group 10.jpg

この様にしてレイヤーパネルでwill-changetransformが効いているかどうかを確認することができます。

まとめ

WebサイトのCSSアニメーションを見ていて、カクカクしていてスムーズに動いてくれない時は、GPUが使わておらずCPUで処理されてます。

CPUではなくGPUで動かしてサイトのパフォーマンスを上げるようにしましょう!

最後に運動通信社について

運動通信社は「日本を世界が憧れるスポーツ大国にする」というビジョンを達成するべく、一緒に働く仲間を募集しています!
PMやアプリエンジニア、Webエンジニアなど色んな職種を募集しておりカジュアル面談大歓迎なので是非採用フォームよりご連絡ください!
ぜひ一緒に、自分たちも世の中もワクワクするサービスを作りましょう!

Greenも活用中です

17
25
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
17
25

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?