複数のCSSプロパティを独立してトランジションさせる

複数プロパティトランジション

transition: allを使用する代わりに、各プロパティに異なるトランジション設定を指定できます。これにより、要素の各側面がどのように変化するかを精密に制御できます。

CSSコード

.element {
  opacity: 0.8;
  transform: translateY(0) scale(1);
  background-color: #3b82f6;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: opacity 0.2s ease-in,
              transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              background-color 0.25s ease,
              box-shadow 0.3s ease-out;
}

.element:hover {
  opacity: 1;
  transform: translateY(-4px) scale(1.02);
  background-color: #2563eb;
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.25);
}

なぜallを使わないのか？

transition: all 0.3s easeを使用すると、すべてのプロパティに同じdurationとタイミングが適用されます。これにはいくつかの問題があります：

1. パフォーマンス: ブラウザがすべてのアニメーション可能なプロパティの変更を監視
2. 制御: opacityをtransformより速くフェードさせることができない
3. 副作用: 変更を予期していないプロパティの意図しないトランジション

ショートハンド vs ロングハンド

ショートハンド（カンマ区切り）：

transition: opacity 0.2s ease-in, transform 0.3s ease-out;

ロングハンド（個別プロパティ）：

transition-property: opacity, transform;
transition-duration: 0.2s, 0.3s;
transition-timing-function: ease-in, ease-out;
transition-delay: 0s, 0s;

両方とも同じ結果を生成します。ショートハンドの方が一般的で読みやすいです。ロングハンドは子要素で単一の側面（タイミング関数など）をオーバーライドする必要がある場合に便利です。

順序の戦略

便利なパターンは、プロパティをdurationの短い順に並べることです。最も速いプロパティ（多くの場合opacity）が即座にフィードバックを提供し、遅いプロパティ（transform、shadow）がレイヤード感のあるリッチなアニメーションを作成します。