以前、アニメーションはJavaScriptを利用するよりもCSS3を利用した方が滑らかな動きになるということを紹介しましたが、今回もJavaScriptでのアニメーションをCSS3で実現する方法を紹介いたします。

アニメーションはCSS3で

Webサイトを見ていると、スクロール等に合わせて要素がひとつずつ順番に表示されていくアニメーションを見たことがあると思います。
以前ですと、JavaScriptで一つ目の要素を表示させ、その何秒後に次の要素を表示させという風なプログラムを書く必要がありました。

プログラム例）0.3秒ごとに要素が順番に表示される

$('.element01').animate({opacity : 1}, 1000);
$('.element02').delay(300).animate({opacity : 1}, 1000);
$('.element03').delay(600).animate({opacity : 1}, 1000);
$('.element04').delay(900).animate({opacity : 1}, 1000);

※jQuery使用

それほど難しくはありませんね。
delay()を利用して、動作を遅らせています。

ただ、今はCSS3を利用して、表示させるタイミングをずらすことをこういったJavaScriptを利用せず実現することができるのです。※一部JavaScriptは利用します。

状態の変化、遅延には「transition（時間的変化）」を使います。

transition: 変化させるプロパティ 変化にかかる時間 イージング 遅延させる時間;

下記がtransitionを利用したサンプルになります。
「アニメーションスタート」ボタンをクリックすると、親要素にclass「show」が付与されます。
初期状態はopacity（透明度）を0で見えなくして、「show」が付与されることで見えるようになります。
これを、「transition」を使って時間をかけて状態を変化させ、さらに動作を遅延させ、順番に表示させていきます。

サンプル

アニメーションスタート

HTML

  
要素1
  
要素2
  
要素3
  
要素4

CSS

.element p{ opacity: 0;}
.element.show p{ opacity: 1;}
.element01{ transition: opacity 1.0s linear 0.0s;}
.element02{ transition: opacity 1.0s linear 0.3s;}
.element03{ transition: opacity 1.0s linear 0.6s;}
.element04{ transition: opacity 1.0s linear 0.9s;}

JavaScript

$('.btn').on('click', function() {
  $('.element').addClass('show');
  return false;
});

いかがでしょうか？

今回はopacity（透明度）の変化だけでしたが、位置の移動など複雑なアニメーションもCSS3のtransitionを利用すると簡単に設定することができます。

これからもジェイテンネットでは状況に応じて、最適な構築を心がけていきたいと思います。