なぜ'transition: all'がパフォーマンスを損なうのか

transition: allのコスト

transition: allは最も一般的なCSSトランジションパターンであり、同時に最も無駄なものでもあります。アニメーションする意図のないプロパティを含め、すべてのアニメーション可能なプロパティの変更を監視するようブラウザに指示します。

内部で何が起きているか

以下を記述すると：

.element {
  transition: all 0.3s ease;
}

ブラウザは以下を行う必要があります：

1. 毎フレーム、すべてのアニメーション可能なCSSプロパティをチェック
2. 比較のために以前の値を追跡
3. 変更されたプロパティの補間を開始 — 予期しないものも含めて

意図しない副作用

.element {
  color: #333;
  background-color: #fff;
  padding: 16px;
  transition: all 0.3s ease;
}

/* 後で、テーマクラスやメディアクエリがpaddingを変更 */
@media (max-width: 768px) {
  .element { padding: 8px; }
}

transition: allでは、ウィンドウのリサイズによりpaddingがアニメーション — 不快で意図しない効果です。transition: background-color 0.3s easeのみを指定していれば、paddingは即座に変更されます。

より良いアプローチ

アニメーションする予定のプロパティのみを常にリストしてください：

/* 悪い例 */
.button {
  transition: all 0.3s ease;
}

/* 良い例 */
.button {
  transition: background-color 0.2s ease,
              transform 0.2s ease-out,
              box-shadow 0.2s ease;
}

allが許容される場合

• プロトタイピング: 実験中でパフォーマンスを気にしない場合
• シンプルな要素: 要素のプロパティが非常に少ない場合（例：background-colorとopacityのみの単色div）
• 短命の要素: 短時間だけ存在するツールチップや通知