jQueryのアニメーションをCSS3アニメーションに置き換える

カテゴリーから探す

年別から見る

2016/06/08

jQueryのアニメーションをCSS3アニメーションに置き換える

以前はWEBページでアニメーションを実装する場合、
jQueryのanimate()が利用されることが一般的でした。

しかし、HTML5+CSS3の普及により、
CSS3のアニメーションが利用しやすくなってきたため、
より滑らかで、ブラウザへの負担も少なくて済むCSS3によるアニメーションが普及してきています。

そこで、3年ほど前にjQueryのanimate()で実装していたアニメーションを、
CSS3によるアニメーションに置き換えてみました。

↓jQueryによるアニメーション
DEMO

↓CSS3によるアニメーション
DEMO

方法

CSS3のアニメーションに置き換えると言っても、
連続したアニメーションを実装する場合、
クラスを任意のタイミングで切り替える必要があるため、
クラスの切り替えにはjQueryを利用します。

また、新しい企画のJavaScriptでは、非同期処理を実装するためのPromiseオブジェクトというものが備わっているのですが、
IEでは対応していないため、実用としてはまだ利用ができません。
そこで、jQueryのDefferedオブジェクトを非同期処理に利用する必要が出てきます。

では、具体的に見てみます。

まずは以下の様なjQueryのアニメーションの場合。


	//車が走ってくる
	function carRun(){
		treeShake();
		var d = new $.Deferred;
		$("#car").css({
			"right" : "-20px"
		});
		$("#car").animate({
			"right" : "378px"
		}, 1000, "easeOutBounce", function(){
			d.resolve();
		});
		return d.promise();
	}

//車が走ってくる

function carRun(){

treeShake();

var d = new $.Deferred;

$("#car").css({

"right" : "-20px"

});

$("#car").animate({

"right" : "378px"

}, 1000, "easeOutBounce", function(){

d.resolve();

});

return d.promise();

}

↓


#car.run {
	-webkit-animation: run 1s ease-in 1;
	animation: run 1s ease-in 1;
	-ms-transform: translateX(-398px);
	transform: translateX(-398px);
}
@-webkit-keyframes shake {
  0% { -webkit-transform: translateX(0); }
  17% { -webkit-transform: translateX(30px); }
  33% { -webkit-transform: translateX(-30px); }
  50% { -webkit-transform: translateX(20px); }
  66% { -webkit-transform: translateX(-10px);; }
  83% { -webkit-transform: translateX(10px); }
  100% { -webkit-transform: translateX(0); }
}
@keyframes shake {
  0% { -ms-transform: translateX(0); transform: translateX(0); }
  17% { -ms-transform: translateX(30px); transform: translateX(30px); }
  33% { -ms-transform: translateX(-30px); transform: translateX(-30px); }
  50% { -ms-transform: translateX(20px); transform: translateX(20px); }
  66% { -ms-transform: translateX(-10px); transform: translateX(-10px); }
  83% { -ms-transform: translateX(10px); transform: translateX(10px); }
  100% { -ms-transform: translateX(0); transform: translateX(0); }
}

#car.run {

-webkit-animation: run 1s ease-in 1;

animation: run 1s ease-in 1;

-ms-transform: translateX(-398px);

transform: translateX(-398px);

}

@-webkit-keyframes shake {

0% { -webkit-transform: translateX(0); }

17% { -webkit-transform: translateX(30px); }

33% { -webkit-transform: translateX(-30px); }

50% { -webkit-transform: translateX(20px); }

66% { -webkit-transform: translateX(-10px);; }

83% { -webkit-transform: translateX(10px); }

100% { -webkit-transform: translateX(0); }

}

@keyframes shake {

0% { -ms-transform: translateX(0); transform: translateX(0); }

17% { -ms-transform: translateX(30px); transform: translateX(30px); }

33% { -ms-transform: translateX(-30px); transform: translateX(-30px); }

50% { -ms-transform: translateX(20px); transform: translateX(20px); }

66% { -ms-transform: translateX(-10px); transform: translateX(-10px); }

83% { -ms-transform: translateX(10px); transform: translateX(10px); }

100% { -ms-transform: translateX(0); transform: translateX(0); }

}


	//車が走ってくる
	function carRun(){
		treeShake();
		var d = new $.Deferred;
		$("#car").addClass("run");
		var $timer = setTimeout(function() {
			d.resolve();
			clearTimeout($timer);
		}, 1000);
		return d.promise();
	}

//車が走ってくる

function carRun(){

treeShake();

var d = new $.Deferred;

$("#car").addClass("run");

var $timer = setTimeout(function() {

d.resolve();

clearTimeout($timer);

}, 1000);

return d.promise();

}

基本的にはクラスの切替のタイミングはsetTimeout()を利用し、
jQueryではクラスの付替えと非同期の処理のみを行います。

アニメーションは、CSS3のtransitionもしくはanimationで実装します。

このアニメーションの場合、
jQueryのアニメーションのときに、「easeOutElastic」という特殊なイージングを設定してるのですが、
このような複雑なイージングは、CSS3では設定ができません。
そのため、keyframesを使って、近い動きを再現することで、同じようなアニメーションを実装しています。

特殊なイージングを使っていない場合は、以下のようにtransitionによってアニメーションを実装できます。


	//鳥が逃げる
	function birdEscape(){
		var d = new $.Deferred;
		$("#bird").animate({
			"bottom" : "400px",
			"right" : "820px"
		}, 3000, "linear", function(){
			d.resolve();
		});
		return d.promise();
	}

//鳥が逃げる

function birdEscape(){

var d = new $.Deferred;

$("#bird").animate({

"bottom" : "400px",

"right" : "820px"

}, 3000, "linear", function(){

d.resolve();

});

return d.promise();

}

↓


#bird.escape {
	-webkit-transform: translate(-405px, -151px);
	-ms-transform: translate(-405px, -151px);
	transform: translate(-405px, -151px);
}

#bird.escape {

-webkit-transform: translate(-405px, -151px);

-ms-transform: translate(-405px, -151px);

transform: translate(-405px, -151px);

}


	//鳥が逃げる
	function birdEscape(){
		var d = new $.Deferred;
		$("#bird").addClass("escape");
		var $timer = setTimeout(function() {
			d.resolve();
			clearTimeout($timer);
		}, 3000);
		return d.promise();
	}