こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
今回は、CSSアニメーションの中でも少しユニークな動きを実現できるsteps()関数についてご紹介します。
なめらかに動くeaseやlinearといったタイミング関数とは違い、「カクカクと段階的に動く」のがこのsteps()の魅力。
この関数を使えば、まるで昔のドット絵ゲームのようなアニメーションが簡単に再現できます。
今回は、そんなsteps()の基本的な使い方から、実際のコード例、さらに注意点や応用パターンまで、初心者から中上級者まで役立つ内容をまとめてお届けします。
そもそも steps() とは？
CSSアニメーションでおなじみのanimation-timing-functionには、easeやlinearのようなタイミングを制御する関数があります。
その中でもsteps()は少し特殊で、アニメーションの進行を段階的に分割する機能を持ちます。
例えばsteps(5)と指定すると、アニメーションが5ステップでカクッカクッと動きます。
この性質を活かせば、ドット風のビジュアルや、スプライト画像によるパラパラ漫画のような演出にも最適です。
実際のコード例：ドット風アニメーションを作ってみよう
HTMLとCSSの基本構成
まずは簡単なアニメーションで、steps()の挙動を確認してみましょう。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
この例では、黒い四角が横に移動しますが、steps(5)により5段階に分けてカクカクと動きます。
普通のlinearやeaseとは明らかに違う印象になりますね。
steps() の応用テクニック
steps()の魅力は「移動」だけにとどまりません。
タイピング風アニメーションを実現
文字が1文字ずつ表示されていく「タイピングアニメーション」の再現。steps()を使うと簡単です。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
- steps(文字数)でタイピングのカクカク表示を再現
- overflow: hiddenとwidthで文字を隠しつつ少しずつ表示
- border-rightをつければ点滅カーソル風の演出も可能
注意点：steps()を使うときの落とし穴
便利なsteps()ですが、使い方によっては思ったように動かないこともあります。
- タイミングの設計が悪いと、動きがぎこちなく止まって見えることがあります。
- アニメーション時間とステップ数のバランスが悪いと、「一瞬だけ動いて止まる」といった症状になることも。
- スムーズな見た目を求める場合はsteps()ではなくeaseやcubic-bezierを使うべき。
テストを繰り返し、目的に合ったタイミング関数を選ぶことが重要です。
まとめ：steps()でアニメーションに「個性」を
なめらかな動きだけがCSSアニメーションではありません。
steps()を使えば、懐かしさ・面白さ・個性のある表現が簡単に作れます。
アニメーションに少し遊び心を加えたいときや、レトロゲーム風の演出をしたいとき、ぜひsteps()を使ってみてください。
初心者でもすぐ試せるのがCSSの良いところです。
コードをコピペして、あなたのデザインに取り入れてみましょう！
