アニメーションにはtransformとopacityを使おう!理由をわかり易く説明!

アニメーションで要素を動かす際に、left、right、top、bottomを使用しているコードを見かけることがあります。
しかし、leftなどの位置調整を行うプロパティーはレンダリングのパフォーマンスの低下を起こすため、アニメーションには使ってはいけません。

理由を詳しく知りたい方はこちらの記事を見てください。

フロントエンジニアなら知っておきたいブラウザレンダリングの仕組みをわかりやすく解説!

この記事では使用例を交えながら、transformopacityの使い方を見ていきましょう。

TransformとLeftを使ったアニメーションのパフォーマンス比較

まず、transformとleftをそれぞれ使用した際のパフォーマンスの比較を行います。ここでは、パフォーマンスを比較しやすくするために、以下の条件を用意しました。

測定条件
  1. 400個のブロックを作成して、それぞれ200個ずつに分け、Transformで動かすものを青色、Leftで動かすものを赤色としました。
  2. ブラウザの設定からCPUのパフォーマンスを1/6に設定し、意図的に処理を遅くして測定しました。

ソースコード
Codepen

青色がスムーズに動いているのに対して、赤色は動きがカクカクしているのが見て取れます。これがブラウザの処理フローによるパフォーマンスの違いです。サイトの規模が大きくなるに連れて、パフォーマンスを意識した実装をしているかどうかは、見た目に大きな違いを生みます。この記事でtransformopacityの使い方を学んで、積極的に導入しましょう。

では実際のケーススタディーを見てみましょう。

ケーススタディー

位置を移動する

まずは位置を移動するアニメーションを考えてみます。位置を変更する場合はtransform: translateを使います。

ダメな例:top, left, bottom, right, margin, paddingで移動
良い例:transform: translateで移動

Transformで移動
Leftで移動

Transform(青色)を使うとスムーズに動いていますね。Left(赤色)は動きがカクついているのが確認できます。

大きさを変更する

次に大きさを変更します。大きさを変更する際はtransform: scaleを使います。

ダメな例:height、width、paddingで拡大縮小
良い例:transform: scaleで拡大縮小

Transform: scaleで拡大
Width, Heightで拡大

この比較では見た目にはそれほど大きな違いは見られないかもしれません。拡大すると赤色の方が動きがカクついているのが確認できます。また、拡大する要素に隣接する要素や子要素がある場合、それら要素の位置や大きさも再計算する必要があるため、よりパフォーマンスの低下が引き起こされます。

ワンポイントアドバイス
transformにはそのほかにもscaleXscaleYrotateskewなど色々な変形を行える関数が用意されているので、widthheightよりも柔軟な変形が行なえます。

透明度を変更する

背景の透明度を変更する場合はopacityを使いましょう。
ダメな例:背景色(rgba)の透明度を変える
良い例:opacityを使う

Opacityで変更
RGBAの透明度を変更

悪い例では背景色の透明度を変更しています。背景色の透明度を行うのと、その要素自体の透明度を変えるのでは一見同じに見えますが、ブラウザからすると背景色の透明度を変更する方が処理が重くなります。ホバー時の色の変更などは、なるべくopacityで色の濃淡を調節し、視差効果を付けたほうがブラウザには優しい設計となります。

まとめ

transform, opacityを意識して使用することで、ブラウザの負荷を小さくする事ができます。
上で挙げた例を見てもわかりますが、アニメーションさせる要素が少なかったり、画面に表示されている要素の数がそれほど多くない場合、transformを使用しなくても大きな違いは出ません。しかし、ウェブサイトが成長し、規模が大きくなるとその違いは歴然です。そうなってから修正するのは大変です。日頃から意識してtransformopacityを使用するようにしましょう。

次の記事ではすでにパフォーマンスの低下が見られるサイトの場合、どの様にして改善していけばよいのかをChromeのDevtoolを使ってご説明します。

次の記事

パフォーマンス低下の原因をChromeのDevtoolで調査しよう

関連記事

レンダリングのパフォーマンス対策入門〜アニメーション、JSで困った時に

関連記事


Pjax Blog – Free WordPress Theme
Pjax Blogにはブログ作成に必要な機能が全て含まれています。初期設定はテンプレートを読み込むだけなので、PCが苦手の方でも大丈夫です!

もっとみる

最新記事