CSSやjQueryで要素をアニメーションさせて表示する２つの方法

要素をアニメーションさせるには２つの方法があります。

１つめはjQueryのアニメーション関数を使う方法で２つめはCSSのみで要素にアニメーションプロパティを指定する方法です。

どちらでもアニメーションができますが、できることが若干異なります。

ここではその違いも踏まえてこの２つの方法で要素をアニメーションさせる方法について解説します。

jQueryのみでアニメーション

まず１つめはjQueryだけで要素をアニメ表示する方法です。

要素に対してアニメーションをかける関数はいくつかありますが、ここではfadeIn関数を使います。構文は次の通りです。

fadeIn([ミリ秒], [コールバック関数])

１つめの引数にアニメーション時間(ミリ秒)、２つめにはアニメーション終了時に実行する関数を渡します。２つめに関しては省略可能です。

ではこれを使って要素をアニメ表示する例を紹介します。ここでは表示する要素とクリックすると要素を表示するボタンを次のように定義します。

<div id="image_box">
  <img src="./wordpress.png" />
</div>
<button id="fadein_btn">画像を表示</button>

表示する要素は画像要素が入った「image_box」というidが割り振られた要素です。

そしてボタンを押すと要素を表示するスクリプトは次の通りです。

jQuery("#fadein_btn").on("click", function(){
  jQuery("#image_box").fadeIn(1000);
});

これで要素が１秒間フェードインしながら表示されます。実際にどのように動作するかは下のボタンを押して確かめてください。

画像を表示画像を隠す

この方法を使う利点は要素に対してアニメーション関数を実行するだけなので簡単なことです。

ただ細かい操作をしようとすると複雑なコードを書かなければならないのでフェードアウトなどの単純な処理をするときはこの方法が役立つと思います。

CSS+jQueryでアニメーション

次はCSSとjQueryを組み合わせて要素をアニメ表示する方法を紹介します。

CSSで要素をアニメーションするには次のようなanimation関係のプロパティを要素に指定します。

• animation-name
  要素で実行したアニメーション名を渡す
• animation-duration
  アニメーション１回当たりの実行時間。「2s」のように秒単位(s)をつけた値を渡す
• animation-delay
  アニメーションの遅延時間。「2s」を指定すると２秒後にアニメーションが開始する
• animation-iteration-count
  アニメーションの繰り返し回数。「inifinite」を指定すると無限ループする

他にもanimation関係のプロパティはありますが、基本的にはこれらのプロパティがよく使われます。

そしてanimation-nameプロパティに渡すアニメーションは@keyframesという@規則内で定義されます。

例えば要素の幅が100pxから200pxまで変形するようなアニメーションをさせたい場合は次のように@keyframesでアニメーションを作れます。

@keyframes anime
{
  from{
    width: 100px;
  }
  to{
    width: 200px;
  }
}

fromブロックにアニメ開始時の要素のCSS、toブロックにアニメ終了時の要素のCSSを書きます。fromとtoの間には0%～100%の範囲でいくらでもブロックを作れます。

そして要素にこのアニメーションを適用するには次のようにanimation-nameプロパティに対してアニメ名を渡します。

.box{
  animation-name: anime;
  animation-duration: 3s;
}

ではこれを使って要素を表示する例を紹介します。

まず次のように表示する要素とクリックすると要素を表示するボタンを定義します。

<div id="image_box">
  <img src="./wordpress.png" />
</div>
<button id="fadein_btn">画像を表示</button>

上の例では画像要素の入ったdiv要素を表示するものとします。

そしてCSSで次のようなアニメーションを定義します。

@keyframes fadein
{
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}

透過度が0(透明)から1(完全不透明)に変化するようなアニメーションです。

そしてボタンがクリックされたときに要素を表示するために次のスクリプトを書きます。

jQuery("#fadein_btn").on("click", function(){
  jQuery("#image_box")
        .css("display","block")
        .css("animation-name", "fadein")
        .css("animation-duration", "3s");
});

このスクリプトではcss関数を使ってボタンクリック時にCSSプロパティを設定しています。つまりボタンクリック時に要素に次のCSSを適用するのと同じです。

animation-name: fadein;
animation-duration: 1s;
display: block;

これでjQueryでfadeIn関数を使った場合と同じように要素がフェードインしながら表示されます。実際にどう表示されるかは下のボタンを押して確かめてください。

画像を表示画像を隠す

この方法の利点はCSSが使えるので複雑なアニメーション効果をつけたい場合でも複雑なコードを書かなくて済むという事です。

例えば次のようなアニメーションを定義すれば要素をフェードイン＆回転しながら表示といった複雑なアニメ効果もつけることが可能です。

@keyframes fadein
{
  from{
    opacity: 0;
    transform: rotateX(180deg);
  }
  to{
    opacity: 1;
    transform: rotateX(360deg);
  }
}

transformプロパティにrotateX関数を渡すことでX軸方向に180度画像を回転させています。

実際にどう表示されるかは下のボタンをクリックしてください。

画像を表示画像を隠す

以上jQueryのみとCSSとjQueryを組み合わせて要素をアニメ表示する２つの方法について紹介しました。簡単なアニメ表示ならjQueryのみ、複雑なアニメ表示ならCSSも利用といった感じで使い分けるといいと思います。