CSSのtransitionを使ってアニメーション

最近transitionが楽しくなってきたからその記述について

transitionとは

http://www.htmq.com/css3/transition.shtml
CSSによってアニメーションさせる時に使用するプロパティ。前提として、jsを使用するのが基本。
例えば、

<div class="test left"></div>

.test {
	position: absolute;
	height: 50px;
	width: 50px;
	background-color: #000;
}
.left {
	left: 0%;
}
.right {
	left: 100%;
}

$(function() {
	setTimeout(function(){
		$(".test").removeClass("left");
		$(".test").addClass("right");
	},1000);
});

これを実行すると、画面一番左に存在している黒い四角が、1000ミリ秒後に一番右にパッと移動する。
でも、パッと移動させるんじゃなくてすーっと画面を横切るようにしたいとする。
そうした時にtransitionの出番。

<div class="test left"></div>

.test {
	position: absolute;
	height: 50px;
	width: 50px;
	background-color: #000;
	transition-property: left;
	transition-duration: 10s;
}
.left {
	left: 0%;
}
.right {
	left: 100%;
}

$(function() {
	setTimeout(function(){
		$(".test").removeClass("left");
		$(".test").addClass("right");
	},1000);
});

いじったのはCSSだけ。これで「黒い四角が1000ミリ秒後に移動開始、10秒かけて右に移動する」という動きになる。
ざっくりいうと、
transition-propertyはtransitionしたいプロパティを指定。
transition-durationは何秒かけるか。

で、ここからが本番。

CSSにはtransformプロパティというものが存在する。
まあ、ざっくりいうと変形に関するプロパティで、横を伸ばしたり縦を伸ばしたりズームしたり回転したりするプロパティ。
これと組み合わせれば何秒かけて要素がズームするとか、回転するとか、そうした面白い動きが実装できる。
さらにもう１つ。javascriptでtransitionEndを検出することで、transitionが終了した時に関数を実行できたりする。

以下、サンプルコード

<div class="test"></div>

.test {
	position: absolute;
	height: 50px;
	width: 50px;
	background-color: #000;
	-moz-transition: -moz-transform 2s linear;
    -webkit-transition: -webkit-transform 2s linear;
    -o-transition: -o-transform 2s linear;
    -ms-transition: -ms-transform 2s linear;
    transition: transform 2s linear;
	webkitTransform:scale(1.0);
	mozTransform:scale(1.0);
	oTransform":scale(1.0);
	transform":scale(1.0);
}
.zoom {
	webkitTransform:scale(1.5);
	mozTransform:scale(1.5);
	oTransform":scale(1.5);
	transform":scale(1.5);
}

$(function() {
	setTimeout(function(){
		$(".test").addClass("zoom");
	},1000);
	var flag = 0;
	$(".test").bind("oTransitionEnd mozTransitionEnd webkitTransitionEnd transitionend",function(){
		if(flag == 0) {
			flag = 1;
			alert("hoge");
		};
	});
});

ざっくりこんな感じ。
まず、1000ミリ秒後に.testにzoomを追加。するとscaleのアニメーションが始まる。scaleは拡大縮小に関するプロパティ。
2秒かけて1.5倍に拡大した後、transitionendが発火。hogeというalertが鳴る。簡単だね。
注意事項としては、サンプルでいうflag及びそれによるif文。これがないと、ブラウザによっては２回３回とalertが鳴ってしまう。

例えばここでいうalertの部分をさらにtransition操作するものにしたりとか、ページジャンプするものにしたりとか、スクロールさせるものにすると面白いコンテンツが作れそう。
ただ、transitionはIE9以下は対応していないので、if文で分岐させて何か処理をさせる必要がある。

では