CSSのtransform transitionを使ったホバー時のスライドアップ効果

transformトランジションによるスライドアップ

スライドアップ効果は、ユーザーがホバーした時に要素を垂直方向に移動させます。topやmargin-topの代わりにtransform: translateY()を使用することで、アニメーションがGPUアクセラレーションされ、レイアウトの再計算がトリガーされません。

CSSコード

.card {
  transform: translateY(0);
  transition: transform 0.4s ease-out;
}

.card:hover {
  transform: translateY(-8px);
}

なぜpositionではなくtransformを使うのか？

top、margin、paddingをアニメーションすると、ブラウザは毎フレーム周囲の要素のレイアウトを再計算する必要があります。これにより「レイアウトスラッシング」とカクつきのあるアニメーションが発生します。transformはコンポジットレイヤーで動作するため、GPUがレイアウトに影響を与えずに移動を処理します。

タイミング関数: ease-out

ease-outカーブは速く始まり、終わりに向かって減速します。これは自然な減速を模倣し — 物体が上にスライドして穏やかに停止するように — linearよりも自然に感じられます。

他のプロパティとの組み合わせ

一般的なパターンでは、スライドアップとシャドウの増加を組み合わせます：

.card {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.4s ease-out, box-shadow 0.4s ease-out;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

これにより、カードがページから浮き上がるような錯覚が生まれます。