jQueryで要素を移動・回転・拡大・傾斜アニメーションさせる方法

jQueryではanimate関数を使うとCSSプロパティを変化させて要素をフェードインさせたりなどのアニメ効果をつけることができます。

しかしこの関数に要素の回転・移動・拡大・傾斜などを行うtransformプロパティを指定することはできないのでそのようなアニメ効果をつけたい場合は別の方法を考えなくてはなりません。

ここでは要素に対して移動・回転・拡大・傾斜アニメーションをつける方法について解説します。

transformプロパティはanimate関数で使えない

transformプロパティは要素を移動・回転・拡大・傾斜の４つの方法で変形させるプロパティのことです。

このプロパティに渡せるのは次の４つの関数です。

• translate(移動関数)
• rotate(回転関数)
• scale(拡大関数)
• skew(傾斜関数)

例えばX軸方向に100px、Y軸方向に50px、２倍の大きさに拡大したいなら次のようにtransformプロパティに関数を渡します。

transform: translateX(100px) translateY(50px) scale(2);

関数はスペースで区切ることで複数渡せます。

要素を簡単に変形できて便利ですが、このtranformプロパティはjQueryのanimate関数の中では使えません。

例えば次のような書き方は不可です。

$(".box").animate(
  {transform: "translateX(100px) translateY(50px) scale(2)"}, 
  {duration: 3000}
);

animate関数ではtransformプロパティを使えないので注意が必要です。

transitionプロパティを使う

animate関数は使えないので代わりにアニメさせたい要素に対してtransitionプロパティを指定する方法を使います。

transitionプロパティは要素のCSSプロパティの時間変化を指定するためのプロパティで、次のように変化させたいCSSプロパティと時間をまとめて指定できます。

#box{
  transition: width 3s;
}

このプロパティを指定した時点ではwidthに変化はありません。

次のようにホバーされたときに呼び出されるhover疑似クラス内などでwidthプロパティが指定されると3秒かけてその大きさまでアニメーションつきで変化します。

#box:hover
{
  width: 200px;
}

実際にどのように動くかは下の要素にマウスをホバー(スマホの場合は要素を長押し)してみてください。

このtransitionプロパティを使って要素のtransformプロパティを変化させてアニメーションさせます。

やり方ですがまず次のようなアニメさせる要素とボタン要素の２つを用意します。

<div id="box"></div>
<button id="show_btn"></button>

そしてアニメ表示させる要素に次のCSSを適用します。初期状態では「transform: scale(0)」と指定することで要素の大きさを０にしています。

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

次がボタンがクリックされたときにtransformプロパティをcss関数で書き換えるスクリプトを書きます。

$(function(){
  $("#show_btn").on("click", function(){
    $("#box").css({transform: "scale(1)"});
  });
});

このようなコードを書くとボタンがクリックされたときに徐々に拡大しながら要素が表示されます。実際にどのような動きをするかは次のボタンをクリックしてみてください。

アニメ表示

このようにtransitionプロパティをうまく使えばanimate関数を使わず要素に変形アニメーションを適用できます。

変形アニメーションの種類

最後にtransformプロパティで移動・回転・拡大・傾斜の４種類のアニメ効果のつけ方と例を紹介します。

移動(translate)

要素の移動にはtranslate関数を使います。アニメーションのコード例は次の通りです。

CSSコード

#box{
  transform: translateX(200px);
  transition: transform 2s;
}

スクリプト

$("start_btn").on("click", function(){
  $("#box").css( { transform: translateX(0) } );
});

下のボタンを押すと水色の要素が右から左に移動します。

アニメ開始

回転(rotate)

回転にはrotate関数を使い、関数に渡す値には「deg」という角度を表す単位をつけます。

次がアニメーションのコード例です。

CSSコード

#box{
  transform: rotate(360deg);
  transition: transform 2s;
}

スクリプト

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

下のボタンを押すと要素が回転します。

アニメ開始

拡大・縮小

要素の拡大・縮小にはscale関数を使います。以下がコード例です。

CSSコード

#box{
  transform: scale(0);
  transition: transform 2s;
}

スクリプト

$("start_btn").on("click", function(){
  $("#box").css( { transform: "scale(1)" } );
});

下のボタンを押すと水色の要素が徐々に拡大されながら表示されます。

アニメ開始

傾斜(skew)

要素を傾けて表示するにはskew関数を使います。関数に渡し値にはscale関数と同じく「deg」という単位をつけるのを忘れないでください。

以下がコード例です。

CSSコード

#box{
  transform: skew(0deg, 0deg);
  transition: transform 2s;
}

スクリプト

$("start_btn").on("click", function(){
  $("#box").css( { transform: "skew(20deg, 5deg)" } );
});

下のボタンを押すとX軸方向に20度、Y軸方向に5度だけ要素が傾きます。

アニメ開始

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