★★★ たった "1日" でできるWordPressブログの作り方講座 ★★★ はじめてみる

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

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

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

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

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

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

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

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

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

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

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

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

例えば以下の例は3秒間かけて透過度を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プロパティをアニメーションさせる方法について解説しました。

The following two tabs change content below.

フク郎

昔はプログラミングに熱中していたが、ブログとWordPressに興味を持ち始め今はサイト・ブログ作りが生きがい。自分の「好き」をブログに変えたい、情報発信したい人に役立つWordPress術・サイト構築術を発信中。一日一歩楽しんでブログ構築できるように読みやすい&楽しい記事作りを心がけています。Twitterアカウントはこちら ⇒ フク郎@Fukuro-Press