CSSのtransformとanimationは、JavaScript依存の動的UI構築から脱却するための基盤技術です。これらのプロパティを活用することで、レイアウトフローを乱さずに要素を空間的に操作し、時間軸に沿った滑らかな状態遷移を実現できます。

空間操作：transformによる非破壊的変形

transformは、要素の描画位置・形状・向きを変更する一方で、ドキュメントフロー内での占有領域（box model）には一切影響を与えません。この特性により、再描画コストが低く、パフォーマンスに優れた視覚効果が可能になります。

<div class="card"></div>

.card {
  width: 120px;
  height: 90px;
  background: #4a6fa5;
  border-radius: 8px;
}

2次元変形の基本関数

2D空間では、translate()、scale()、rotate()、skew()を組み合わせて複合変形を定義できます。

<div class="card deform-2d"></div>

.deform-2d {
  transform: translate(60px, 40px) scale(0.9) rotate(-12deg);
}

• translate(x, y)：指定されたピクセル単位でオフセット移動
• scale(sx, sy)：X/Y方向それぞれの拡大率（1未満で縮小）
• rotate(angle)：中心点を基準に角度単位で回転
• skew(ax, ay)：X/Y軸に対する傾斜角を指定

3次元空間への拡張

3D変形ではZ軸方向の操作が可能になり、奥行き感のある表現が実現します。ただし、親コンテナにperspectiveまたはtransform-style: preserve-3dを設定する必要があります。

<div class="card deform-3d"></div>

.deform-3d {
  transform: translate3d(30px, -20px, 120px) 
             rotate3d(0.7, 0.3, 0.1, 65deg);
  transform-style: preserve-3d;
}

• translate3d(x, y, z)：Z軸方向の深度移動（正値で手前に、負値で奥へ）
• rotate3d(x, y, z, angle)：任意の軸ベクトルを中心に回転
• perspective(value)：3D空間の視点距離（親要素に適用）

時間軸の制御：animationによる状態遷移

animationは、事前に定義した@keyframesに基づき、CSSプロパティの値を時間経過とともに補間する仕組みです。特にtransformとの組み合わせでは、GPUアクセラレーションが有効になり、高フレームレートのアニメーションが可能です。

キーフレームの定義と適用

以下の例では、要素が円軌道を描くように回転しながらサイズが変化します。

<div class="card orbiting-card"></div>

@keyframes orbit-pulse {
  0% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(80px, 0) scale(1.1);
  }
  50% {
    transform: translate(0, 80px) scale(0.95);
  }
  75% {
    transform: translate(-80px, 0) scale(1.05);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}

.orbiting-card {
  animation: orbit-pulse 3.2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

アニメーション制御プロパティ

単一のanimationショートハンドプロパティで、以下の動作を細かく調整できます：

.controlled-card {
  animation: slide-fade 2.5s ease-out 0.4s 1 forwards;
}

• animation-name：対応する@keyframes名
• animation-duration：1サイクルの実行時間（秒またはミリ秒）
• animation-timing-function：イージング関数（cubic-bezier()も可）
• animation-delay：開始までの待機時間
• animation-iteration-count：再生回数（infiniteも指定可能）
• animation-fill-mode：アニメーション前後におけるスタイル保持（forwardsで終了状態を維持）

統合活用：空間＋時間の合成表現

以下のコードは、Z軸方向の移動と回転を組み合わせた「浮遊」エフェクトを実装しています。視点のperspectiveを親コンテナに設定し、子要素の3D変形を立体的にレンダリングします。

<div class="scene">
  <div class="card floating-card"></div>
</div>

.scene {
  perspective: 800px;
}

.floating-card {
  animation: float-3d 4.8s ease-in-out infinite;
}

@keyframes float-3d {
  0%, 100% {
    transform: translateZ(0) rotateX(0deg) rotateY(0deg);
  }
  25% {
    transform: translateZ(140px) rotateX(15deg) rotateY(10deg);
  }
  50% {
    transform: translateZ(0) rotateX(0deg) rotateY(180deg);
  }
  75% {
    transform: translateZ(-90px) rotateX(-10deg) rotateY(-20deg);
  }
}