jQueryでanimate関数を使わずtransformプロパティをアニメーションさせる方法

jQueryで要素のアニメーションをするにはanimate関数が使われます。

しかしCSSで要素の移動・回転・拡大・傾斜を行うtransformプロパティを指定することはできません。

そこでtransitonプロパティを使ってanimate関数を使わずに要素をアニメーションさせる方法について紹介します。

animate関数にtransformプロパティは渡せない

jQueryのanimate関数は時間に沿ってCSSプロパティを変化させて要素をアニメーションさせるための関数です。

animate関数には次のように２つの引数を渡します。

$("セレクタ").animate({CSSプロパティ}, {オプション})

CSSプロパティには「プロパティ名: 値」の形式でアニメーション終了時のCSSプロパティを指定し、２つめのオプションには再生時間を指定できます。

例えば要素のwidthを200px、heightを100pxに５秒間かけて変化させたいなら次のように書きます。durationには再生時間をミリ秒で渡します。

$(".box").animate(
  {width: 200px, height: 100px}, 
  {duration: 3000}
);

ただしこのanimate関数にはtransformプロパティを渡すことはできません。

例えば以下の例は３秒間かけて透過度を1から0.5、transformプロパティにrotateY関数を渡して要素を回転させようとしたスクリプトです。

jQuery(".box").css({transform: "rotate(360deg)"});
jQuery(".box").animate(
  { transform: "rotate(0deg)", opacity: 0.5 },
  {duration: 3000}
);

こう書いた場合透過度(opacity)だけが変化し、要素は回転しません。

animate関数で複雑なアニメーションをするのにtransformプロパティを渡すのをやってしまいがちですが、こう書いても期待通りのアニメーションはしないので注意してください。

transformプロパティをアニメーションさせるには

そこでanimate関数の代わりにアニメーションさせる要素に対してtransitionプロパティを指定します。

まず次のようにアニメーションさせる要素とクリックしたらアニメを開始するボタンを定義します。

<div id="box"></div>
<button id="start_btn">アニメ表示</button>

そしてこの要素に対して次のようなCSSを指定します。

#box { 
  transform: rotate(360deg); 
  transition: transform 1s; 
  
  background-color: rgba(0, 255, 255, 0.5);
  width: 200px;
  height: 100px;	
}

transitionプロパティにはtransformプロパティが変化したら1.0秒かけて変化するように指定してあります。

そしてボタンがクリックされたときにスクリプト側でcss関数を使い、次のようにtransformプロパティを変化させます。

jQuery(function(){
  jQuery("#start_btn").on("click", function(){
    jQuery("#box").css({transform: 'rotate(0deg)'});
  });
});

実際にどのように動くかは下のボタンを押して確かめてください。

スタート

「スタート」ボタンを押すと右に一回転して元に戻ります。もう一度アニメを見る場合はページをリロードしてください。

以上、jQueryでtransformプロパティをアニメーションさせる方法について解説しました。