Blog

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

2016.06.07Cat:css3 jQuery デザイナー
nino-eye

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

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

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

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

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

方法

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

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

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

 

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

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

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

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

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

この例ではrightやtopの指定をtransformのtranslateに置き換えていますが、
rightやtopの指定でも勿論CSS3のアニメーションは実装可能です。

実際やってみて、
transitionとanimationのkeyframeの使い分けや、
クラスの切り替えタイミング、組み合わせが、
jQueryのアニメーションからCSS3のアニメーションに置き換える場合の肝になってくると感じました。

参考サイト

Easing Function 早見表

Promise – JavaScript | MDN

@keyframes – CSS | MDN

transform:translate()-CSS3リファレンス

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ