以前ここでも「CSS3 Transitionプロパティでアニメーションを実行させるパターン【ページロード/マウスオーバー/クリックアクション】」と題して、
CSSアニメーションの実行パターンをいくつか紹介しましたが、
アニメーションの実行制御をCSS側でなくjQueryで操作させる方法が
簡単でいろいろとこの先使えそうだったので紹介してみます。

jQueryでCSSアニメーションを実行させる方法

構成としてはCSS側でアニメーション設定をしておいて
jQuery側でコンテンツ要素に対してclassを付けたり外したりさせることで
その要素に対してアニメーション制御をする形になります。

例えばHTMLには
以下のようなidを付けたdivを用意して、

◆HTML
<div id="action"></div>

CSS側では
以下のようにアニメーションをセットします。

◆CSS
#action{
	top: 0;
	left: 0;
	width: 50px;
	height: 50px;
	background-color:#fff;
	border:#000 3px solid;
	position: absolute;
	-webkit-transition-property:left,width,height,background-color;
	-webkit-transition-duration:1s,1s,1s,1s;
	-webkit-transition-timing-function:linear,linear,linear,linear;
	-moz-transition-property:left,width,height,background-color;
	-moz-transition-duration:1s,1s,1s,1s;
	-moz-transition-timing-function:linear,linear,linear,linear;
	-o-transition-property:left,width,height,background-color;
	-o-transition-duration:1s,1s,1s,1s;
	-o-transition-timing-function:linear,linear,linear,linear;
	transition-property:left,width,height,background-color;
	transition-duration:1s,1s,1s,1s;
	transition-timing-function:linear,linear,linear,linear;
}
#action.motion{
	left: 400px;
	width: 100px;
	height: 100px;
	background-color:#555;
}

クラス「.motion」に設定してある値がアニメーション実行後の動作になり、
このクラスをjQueryにて要素をクリックするごとに付けたり外したりすることで
アニメーションの実行制御をします。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
$(function(){
	$('#action').click(function(){
		$(this).toggleClass('motion');
	});
});
</script>

そしてこれらを実行させると以下のような感じに。
※画面上の□をクリックしてください。


「jQueryでCSSアニメーションを実行させる方法」サンプルを別枠で表示

四角をクリックするごとに
「left」「width」「height」「background-color」の値を
CSSアニメーション変化させています。

サンプルではjQueryでのクリック動作でアニメーション制御していますが
マウスオーバーなどの別のアクションでも実行させることも可能です。

CSSよりもjQueryの方が様々なイベント処理が行えるので
jQueryでの制御によってCSSアニメーションをあれこれ操作するのも使いやすいかと思います。

jQueryでCSSアニメーションを実行させる際に是非。。。

サンプルファイルをダウンロードしたい方はこちらから