CSS Translateによるスライドインアニメーション

Translateによるスライドイン

translateを使って要素を表示させるスライドインは、最も基本的なアニメーションパターンの一つです。レイアウト再計算を発生させずにスムーズな登場エフェクトを作成します。

トランジションアプローチ

.slide-element {
  transform: translateX(-100%);
  opacity: 0;
  transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}

.slide-element.visible {
  transform: translateX(0);
  opacity: 1;
}

キーフレームアプローチ

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-element {
  animation: slideInLeft 0.4s ease-out forwards;
}

スライド方向

方向	開始時のTransform
左から	translateX(-100%)
右から	translateX(100%)
上から	translateY(-100%)
下から	translateY(100%)

Scaleとの組み合わせ

一般的な拡張として、登場時に控えめなスケールを追加します：

@keyframes slideInScale {
  from {
    transform: translateX(-50px) scaleX(0.95) scaleY(0.95);
    opacity: 0;
  }
  to {
    transform: translateX(0) scaleX(1) scaleY(1);
    opacity: 1;
  }
}

パーセンテージ vs ピクセル

• パーセンテージ（translateX(-100%)）：要素自身の幅分だけ移動。完全に画面外にスライドさせるのに最適
• ピクセル（translateX(-50px)）：固定距離。要素サイズに依存しない控えめなシフトに適している