パフォーマンスを意識したアニメーション

このページの目的

アニメーションが「カクカクする」「重い」といった問題を未然に防ぎ、常に滑らかで心地よい動きを実装するためのテクニックを学びます。
ブラウザがどのように描画を行っているかを少しだけ理解し、パフォーマンスに優しいCSSプロパティを選択できるようになることが目標です。

---

speedなぜパフォーマンスが重要か？

Webサイトのアニメーションは、ブラウザの「描画プロセス」に大きな負荷をかけることがあります。特に、widthやheight、margin、left、topといったプロパティをアニメーションさせると、ブラウザは「再計算（リフロー）」と「再描画（リペイント）」という重い処理を何度も行わなければならず、これがカクつきの原因となります。

一方で、これから紹介するパフォーマンスの良いプロパティを使えば、この重い処理をバイパスし、GPU（画像処理装置）の助けを借りて、非常に滑らかにアニメーションさせることができます。

---

recommendパフォーマンスが良いプロパティ（積極的に使おう）

アニメーションで動かすプロパティは、基本的に以下の2つに絞ることを強く推奨します。これらは、GPUアクセラレーションが効きやすく、非常に滑らかに動作します。

transform

移動（translate）、回転（rotate）、拡大縮小（scale）など、要素の形や位置を変えるのに使います。レイアウトの再計算を引き起こさずに、見た目だけを変化させることができます。

opacity

要素の透明度を変更します。フェードイン・フェードアウトのような、フワッと表示させたり消したりするアニメーションに使います。

実装コード例

/* 悪い例 ❌: leftプロパティをアニメーション */
@keyframes slide-bad {
  from { left: -100px; }
  to { left: 0; }
}

/* 良い例 ✅: transformプロパティをアニメーション */
@keyframes slide-good {
  from { transform: translateX(-100px); }
  to { transform: translateX(0); }
}

.box {
  /* パフォーマンスの良いtransformを使いましょう */
  animation: slide-good 1s ease-out;
}

---

warningアニメーションでは避けるべきプロパティ

以下のプロパティをtransitionや@keyframesで動かすと、再描画のコストが非常に高くなり、パフォーマンスの低下に直結します。特別な理由がない限り、アニメーションでの使用は避けましょう。

• width, height
• margin, padding
• top, right, bottom, left
• font-size
• background-color （※比較的コストは低いですが、多用は注意）

---

---