Back to Top

entacl Lab. Webクリエイティブラボラトリー

Webクリエイティブラボラトリー

投稿日:    投稿者: 安部

CSS3アニメーションに触れてみる(3)

CSS3アニメーションに触れてみる(3)

ホバー時にスプライトシートアニメーションを実行する方法をまとめました。※webkit系のブラウザでご覧下さい。

スプライトシートアニメーション

マウスオーバーでスプライトシートアニメーション
※画像にマウスオーバーして下さい。
#sprite {
	cursor: pointer;
	background: url(/sample/2012/img/sprite.png) no-repeat left top;
	width: 240px;
	height: 110px
}
#sprite:hover {
	-webkit-animation: sprite-animation 2s steps(32) infinite
}
@-webkit-keyframes sprite-animation {
	0% {background-position: 0px 0}
	100% {background-position: -7680px 0}
}
マウスオーバーするとスプライトシートアニメーションが実行されますね。
簡単ですw

ではCSSの定義を見ていきましょう。
まずはこの部分。
#sprite:hover {
	-webkit-animation: sprite-animation 2s steps(32) infinite
}
ホバー時のアニメーション設定です。
sprite-animationというアニメーションを1秒間10コマの早さで実行するよう定義しています。

@-webkit-keyframes sprite-animation {
	0% {background-position: 0px 0}
	100% {background-position: -7680px 0}
}
こちらがsprite-animationの実体です。
背景画像の位置を「0px」から「-7680px」にアニメーションさせる設定です。

これだけでJSを使用してるようなインタラクティブな印象を与える事ができると思います。

それではJSで同じ動きを実装してみたいと思います。
※画像にマウスオーバーして下さい。
#sprite2 {
	cursor: pointer;
	background: url(/sample/2012/img/sprite.png) no-repeat left top;
	background-position: 0px 0px;
	width: 240px;
	height: 110px
}
var BGPOS_STEP = 240;
var BGPOS_END = 7440;
var ANIMATE_TIME = 2;
var TOTAL_STEPS = 32;
var intervalId = -1;
var bgpos = 0;
$(function() {
	
	$("#sprite2").mouseover(function() {
		intervalId = setInterval(animate, parseInt(ANIMATE_TIME*1000/TOTAL_STEPS));
	});
	$("#sprite2").mouseout(function() {
		clearInterval(intervalId);
		intervalId = -1;
		bgpos = 0;
		$(this).css("background-position", bgpos + "px 0px");
	});
});
function animate() {
	bgpos -= BGPOS_STEP;
	if (bgpos < -BGPOS_END) bgpos = 0;
	
	$("#sprite2").css("background-position", bgpos + "px 0px");
}
実装自体はこのように簡単ではありますが、CSS3アニメーションを使う方が圧倒的に楽ではないでしょうか。

アニメーションさせる場合はこのように直接background-positionの値を変更する事になると思いますが、
アニメーションをCSSでクラスとして定義する事でJSではクラスを制御するだけで済み、JSとCSSを分離する事ができるというのもCSS3アニメーションを使用する大きなメリットになるかと思います。
なお、ホバー時にGIFアニ画像に差し替えるようにするだけでも同様の事が可能かと思いますが、
静止画像とGIFアニ画像の両方用意しなければいけないのでスプライトシートの方が楽ですね。

しかし・・またブラウザ依存というワナがありIEでは動きません。。キーフレームアニメーションが早くIEでも実装されてほしいですね。。