CSS3とJavaScriptを使ってアニメーション処理をしてみる

CSS3のアニメーションをjQueryを使って任意のタイミングで行わせてみます。

サンプルコード1

あらかじめアニメーション用のclassを用意して、JavaScriptでclassを追加してアニメーションしてみます。

HTML

<div class="sample"></div>
<button id="btn">アニメーション実行</button>

CSS

.sample {
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
}
.animation {
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
	transition: 1s linear;
}

JavaScript

$(function() {
	$('#btn').on('click', function() {
		$('.sample').addClass('animation');
	});
});

classを付与してアニメーションをするデモページ
　

サンプルコード2

あらかじめアニメーションの値を決めるのではなく、JavaScriptで値を決めてアニメーションさせてみます。
HTMLは先ほどと同じです。

JavaScript

$(function() {
	// 初期位置の設定
	$('.sample').css({
		'-webkit-transform': 'translate(0px, 0px)',
		transform: 'translate(0px, 0px)'
	});
	$('#btn').on('click', function() {
		moving('.sample');
	});
});
// 移動処理
function moving(target) {
	// 移動範囲
	var range = movingRange(target);
	// 移動座標の取得
	var x = getRandomArbitary(0, range[0]);
	var y = getRandomArbitary(0, range[1]);
	// アニメーション実行
	$(target).css({
		transition: '1s linear',
		'-webkit-transform': 'translate(' + x + 'px, ' + y + 'px)',
		transform: 'translate(' + x + 'px, ' + y + 'px)'
	});
}
// 移動可能な範囲を返す
function movingRange(target) {
	var winw = $(window).width();
	var winh = $(window).height();
	var elew = $(target).width();
	var eleh = $(target).height();
	return [(winw - elew), (winh - eleh)];
}
// 指定範囲内の乱数を返す
function getRandomArbitary(min, max) {
	return Math.random() * (max - min) + min;
}

画面内のランダムの座標にアニメーションで移動するようにしてみました。
JavaScriptでアニメーション内容を設定するデモページ