CSS rotateZによる連続回転アニメーション

rotateZによる無限回転

連続回転は、rotateZ(0deg)からrotateZ(360deg)へのアニメーションとanimation-iteration-count: infiniteで実現されます。

CSS

@keyframes spin {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}

.spinner {
  animation: spin 1s linear infinite;
}

タイミング関数

タイミング関数は感覚を大きく変えます：

タイミング	効果
linear	一定速度 — 機械的、スムーズ
ease-in-out	加速と減速 — オーガニック、パルス状
cubic-bezier(0.5, 0, 0.5, 1)	特定のモーションカーブのカスタムイージング

速度制御

.slow   { animation-duration: 3s; }   /* ゆったりした回転 */
.normal { animation-duration: 1s; }   /* 標準的なスピナー */
.fast   { animation-duration: 0.3s; } /* 高速回転 */

逆方向

.counter-clockwise {
  animation: spin 1s linear infinite reverse;
}

パフォーマンスの考慮

連続的なrotateZアニメーションはGPUで合成されるため、非常にパフォーマンスが高いです。marginやtopのアニメーションとは異なり、レイアウトやペイント操作を発生させません。ただし、同時に回転する要素の数は適度に保ち、GPUメモリの圧迫を避けてください。