CSSで動かすアニメーションには、私自身まだまだ使いこなせていないプロパティーがたくさん眠っています。その中のひとつが steps というプロパティーでした。これまでよく使っていた滑らかな動作ではなく、段階ごとに要素を動かすことができます。実際にはどんな場面で使えるんでしょうか？今回はそんな steps プロパティーにフォーカスしてみます。

↑私が10年以上利用している会計ソフト！

steps の記述方法

steps は animation や keyframes プロパティーとともに利用します。steps() のカッコの中には、いくつの段階を経て動作させるのかを記述。例えば5段階で変化させるなら、steps(5) と記述します。

.element {
    animation: img-move 5s steps(5);
}
@keyframes img-move {
  to {
    transform: translateX(500px);
  }
}

このCSSの例だと、「5秒かけて5段階を踏んで横に500px動くよ」という指示になります。

他にも steps(5, start) や steps(5, end) という風に、start と end が加えられます。start はアニメーションが開始されるとすぐに、end は transition-duration で指定した時間が経過した時に動作が始まります。

簡単な例

See the Pen CSS steps Animation by Mana (@manabox) on CodePen.

上の例では steps(6, end) を指定して、段階ごとに表示位置を動かしています。それに対して下の例では steps を指定せず、通常のアニメーションとして動かしています。「動いてないよ！」という人はデモ画面右下の「RERUN」をクリック！

使い勝手悪そう…ですよねw 私もそう思っていました。大丈夫です、慌てず読み進んでください。

CSSスプライトとは？

次にタイトルにもあるCSSスプライトに言及させてください。CSSスプライトとは、複数の画像をひとつにまとめて、CSSで表示位置を指定することにより表示させるCSSの技のひとつ。画像の数を減らし、サイトの表示を速めることができる技術です。

See the Pen CSS sprite by Mana (@manabox) on CodePen.

利用している画像は1枚ですが、カーソルをあわせると背景画像の位置がずれ、画像が変化しているように見えます。詳しくは約6年前に書いた懐かしの過去記事「CSSスプライトで画像を円滑に表示させる」を参考にしてください。

アニメーションとCSSスプライト…なんの関係もなさそうですが、いよいよこのふたつの技術を使ってアニメーションを作ってみましょう！

CSSスプライト＋steps＝パラパラ漫画！

お待たせしました。ここでようやくタイトルにもあるとおり、CSSスプライトと steps を使った実装例のご紹介です。CSSスプライトで使われる画像の表示位置を指定する技術と、steps の段階ごとに変化をうむ技術を使えば、パラパラ漫画が実装できちゃうわけです。

1. 画像を用意

まずはアニメーションさせるための画像を用意します。今回は簡単な例として、5つのフレームで変化させてみようと思います。この例では横1000pxのキャンバスを横に5分割しました。

2. 背景画像として設定

CSSスプライト同様、背景画像として指定します。

HTML

<div class="wcb-chan"></div>

CSS

.wcb-chan {
  background: url(images/wcb-chan-animation.svg) no-repeat;
  width: 200px;
  height: 200px;
}

3. animationを指定

CSSの keyframes を使って、アニメーション終了時に最後のコマが表示させるようにします。ひとつのコマが200px、全体が1000pxなので、keyframes には最後のコマの左端になる800pxのところでアニメーションが終了するよう指定します。また、animation プロパティーで1秒ごとにステップを踏むよう指定。

.wcb-chan {
  background: url(images/wcb-chan-animation.svg) no-repeat;
  width: 200px;
  height: 200px;
  animation: smile 1s steps(4) infinite;
}

@keyframes smile {
  to {
    background-position: -800px 0;
  }
}

4. 完成！

See the Pen CSS sprite + steps Animation by Mana (@manabox) on CodePen.

ちなみにここで steps を使わなかった場合、横に流れる不思議画像として表示されてしまうので注意。

5. 表示方法を調整

See the Pen CSS sprite + steps Animation (paused by hover) by Mana (@manabox) on CodePen.

当然といえば当然なんですが、表示させるスピードを速くすれば、アニメーションもよりなめらかに実行されます。他にも animation-play-state: paused; で動作を止めたり、alternate を指定して行ったり来たりのアニメーションを作れちゃいます。上の例では先程のものより早いスピード＋行ったり来たり＋カーソルを合わせると動きが止まります。

animationプロパティーの詳しい使い方は、過去記事「CSS3アニメーションに挑戦！色が移り変わる背景を実装しよう」を読んでみてください！いろんなエフェクトに使えそう！

ホバー時のアクセントに

さらに、実際にWebサイト制作をする上で使えるようにカスタマイズしたいと思います。ここではボタンにカーソルを合わせると、アイコンをぽよんと動かしてみます。

作り方は先程の過程と変わりません。ただ、もう少し動きのあるアニメーションにしたいので、25段階変化の画像を用意しました。

HTML

span にアニメーション画像を表示させます。

<a href="#" class="question-link">
  <span></span>Question?
</a>

CSS

同様にアニメーションの指定。25コマありますが、スピードを速くしているので滑らかに表示されます。forwards を指定することで、ホバーしている間はアニメーションの最後のコマが表示されます。

.question-link span {
  background: url(images/question.svg) no-repeat;
  width: 50px;
  height: 50px;
  display: inline-block;
}
.question-link:hover span {
  animation: question .6s steps(24) forwards;
}

@keyframes question {
  100% {
    background-position: -1200px 0;
  }
}

完成！

See the Pen CSS sprite + steps Animation (Button Icon) by Mana (@manabox) on CodePen.

アイデア次第でいろんな面白アニメーション画像が作れそうです！

CSSスプライト＋stepsを使った例

同じ技術を使った例をいくつか紹介します。うまく動かないものは「RERUN」ボタンを押してみてください。最初のハートの例はホバーしてくださいね。

See the Pen Twitter Heart by Donovan Hutchinson (@donovanh) on CodePen.

See the Pen CSS Animation with steps() by Guil H (@Guilh) on CodePen.

See the Pen Steps Animation by simurai (@simurai) on CodePen.

See the Pen Step Animation Text by Jamie Burleigh (@jburleigh1) on CodePen.

GIFアニメーションとの違い

「パラパラ漫画風アニメーションならGIFアニメーションでいいのでは？」と思った方も多いかと思います。私も最初はそう思っていました。最後にGIFアニメーションとの違いをいくつか紹介します。

SVG画像が使える！

GIFアニメーションは、もちろんGIF形式の画像しか使えません。透過できるものの、端のギザギザが気になったり、レティナディスプレイできれいに表示させることは難しいです。今回紹介した方法を使えば、PNG画像はもちろん、レティナディスプレイでもきれいに表示できるSVG画像も使えます。

どんなもんかとGIFアニメーションも作ってみましたが、やはりレティナディスプレイだとギザギザが目立ちます…。

スピードやタイミングを調整できる！

アニメーションのスピードはもちろん、ページが読み込まれてから何秒後にアニメーションを開始させるかなどのタイミングもCSSで調整できます。また、記事内でも紹介したとおり animation-play-state プロパティーで停止させることも可能。

GIFアニメーションと比べると、表現できるアニメーションの幅がグンと広がるかなーと思います。素材を作るのに時間がかかってしまいますが、面白いエフェクトも実装できそうなので、ぜひ試してみてくださいね！

すごくどうでもいいですけど、この記事の例やこのサイトの404ページ、エイプリルフールなど年に数回WebクリエイターボックスのTwitterアカウント画像として使われる謎のWebクリエイターボックスのキャラクター（制作時間1分）。適当にWCBちゃんと呼んでいましたが、素敵な名前をふんわり募集しています。