steps() でカクカク動くアニメーション（スプライト・ローダー・時計）

どんな時に使う？

• 8本線の「くるくる」ローダーを、なめらかに回すのではなく1本ずつ点灯するように見せたい時
• スプライト画像（コマを横に並べた1枚絵）をパラパラ漫画のように再生したい時
• 秒針のようにチクタク進む時計、数字が1つずつ切り替わるカウンター、タイプライター風に1文字ずつ出す演出

コード

/* 8方向に線があるスピナーを 1/8 回転ずつ進める */
.loader {
  animation: spin 1s steps(8) infinite;
}
@keyframes spin {
  to { rotate: 1turn; }
}

/* スプライト: 10コマを横に並べた画像を再生 */
.sprite {
  width: 64px;
  aspect-ratio: 1;
  background: url(sprite.png) 0 0 / 1000% 100%;
  animation: play 0.8s steps(10) infinite;
}
@keyframes play {
  to { background-position: 100% 0; }
}

• steps(8) は区間を8等分して、各区間の値で止まる。ローダーの線の数とステップ数を合わせると、線の位置にぴたりと止まりながら回る。
• 第2引数で「どのタイミングで跳ぶか」を選べる。既定は jump-end（区間の終わりで次の値へ）。jump-start、両端も含める jump-both、両端を含めない jump-none がある。スプライトで最後のコマが表示されない・最初のコマが飛ぶ時はここを調整する。
• step-start / step-end はそれぞれ steps(1, jump-start) / steps(1, jump-end) の略記で、「一気に切り替える」点滅などに使える。

注意点・対応状況

• 全ブラウザで使える古くからの機能。
• コマ送りでも動きは動き。点滅や速い切り替えは @media (prefers-reduced-motion: reduce) で止めるか遅くする。
• なめらかさの質感を変えたい時は逆に linear() でバネ（スプリング）イージングを CSS だけで書く が使える。

出典

• @aviralj02 · 2026-10-16