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

こんにちは。田村です。

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;
    }
}

animation-timing-function - CSS: カスケーディングスタイルシート | MDN

MDN Web Docs

animation-timing-function は CSS のプロパティで、アニメーションがそれぞれの周期の中でどのように進行するかを設定します。

animation-timing-function - CSS: カスケーディングスタイルシート | MDN

MDN Web Docs

animation-timing-function は CSS のプロパティで、アニメーションがそれぞれの周期の中でどのように進行するかを設定します。

steps() - CSS: Cascading Style Sheets | MDN

MDN Web Docs

The steps() CSS function defines a transition that divides the input time into a specified number of intervals that are equal in length. This subclass of step functions are some...

"steps" | Can I use... Support tables for HTML5, CSS3, etc

caniuse

"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

まとめ

steps()関数は段階的な動きが必要なアニメーションに利用できます。
また、start と end の使い分けで、タイミングを調整できます。
スプライトアニメーションやプログレスバー、コマ送りなど、幅広い用途に活用可能ですのでぜひ試してみてださい！