スタッフブログ

CSSでコマ送りのように動きを切り替えるアニメーション

2025年01月17日（金）

こんにちは。田村です。

CSSアニメーションで、コマ送りのような「カクカク」と動きを切り替えるアニメーションを作りたい場合がありました。
そんなときはsteps() 関数を使うと実現可能です。

steps() とは？

steps() は、CSSアニメーションの animation-timing-function プロパティで使われる関数の一つです。
通常のアニメーションが滑らかに動くのに対し、steps() を使うと「段階的に進むアニメーション」を作ることができます。

どんな場面で使えるのか？

スプライトアニメーション
1枚の画像に複数のフレームを描き、steps() を使って特定のフレームごとに切り替えることができます。
コマ送りアニメーション
動画を再現するようなアニメーションをCSSで実現できます。
進行状況を表現
プログレスバーなど進行状況の表示に使用できます。

基本的な使い方

steps() 関数には、2つの主要な引数があります。

steps(段階数, タイミング)

段階数
アニメーションを何段階に分割するかを指定します。
steps(4) → 4段階の動き
タイミング
jump-none
0%と100%の状態を表示して間は均等に埋める
jump-start / start
コマの最初に動くので開始時0%の状態は見えない
jump-end /end
コマの最後に動くので終了時100%の状態が見えない
jump-both
startとendの動きをして間を埋めるので0%と100%の状態が見えない

.element {
/*アニメーションを4段階に分けて、各ステップが終了後に切り替わる。*/
    animation: example 4s steps(4, end) infinite;
}

@keyframes example {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -400px 0;
    }
}