CSS3アニメーションでスプライトアニメーションを作ってみる

公開日：2016/02/22

どもです。ついこの間なのですが、スプライト画像を使ったCSSアニメーションをやってみました。
Photoshopで今まではフレームアニメーションを使っていましたが、ビデオタイムラインを使って制作。AfterEffectsいじってたお陰か問題なく操作ができました。

今回は別に作った画像を使って、アニメーションが出来るまでの過程を紹介したいと思います。

CSS3でスプライトアニメーションの作成

画像の準備

css_sprite_animation1

上のような画像を準備します。
自分の場合、Photoshopで縦横80pxのアニメーションを作った後、1フレームずつ画像を書き出します。そして書きだした画像を横につなげる事で上の画像ができました。
あまり枚数があると作業量とデータサイズがとんでもないので注意が必要です。

HTML

<div id="box">
	<h1>アニメーション</h1>
	<div id="animation"></div>
</div>

<h1>アニメーション</h1>

</div>

HTMLには上記のものが入ります。
「div#animation」の中でアニメーションが表示されます。

cssを書き込む

/* レイアウト用 */

#box {
	margin-top: 200px;
}

#box h1{
	margin-bottom: 40px;
	text-align: center;
}

#box #animation {
	width: 80px;
	height: 80px;
	margin: 0 auto;
	overflow: hidden;
	background: url(../img/animation.png) 0 0 no-repeat;
}

/* アニメーション */

#animation {
	animation: sprite 0.5s steps(9, start) infinite ;
}
	
@keyframes sprite {
	0%   {background-position: 0 0;}
	100% {background-position: -720px 0;}
}