ITエンジニア/デザイナ向けにオープンソースを毎日紹介

CSS3によってアニメーションが実現できるようになったとは言っても、それはイコール簡単であるという意味ではありません。ごく基礎的な実装が用意されているので、現実的なアニメーションは自分で作らないといけません。

そこで使ってみたいのがCSS3 Animate Itです。CSSのクラスを指定するだけでアニメーションを実現してくれるライブラリです。

CSS3 Animate Itの使い方

公式サイトで用意されているアニメーションです。

クリックイベントと組み合わせたデモです。

例えば以下のようなHTMLタグでアニメーションを実行できます。

<div class='animatedParent'>
    <h2 class='animated bounceInDown'>It Works!</h2>
</div>

アニメーションの仕方はクラス名として定義されているので、指定するだけです。後はJavaScriptでアニメーションするタイミングを制御すれば良いでしょう。DOMが表示された時やクリック時などを指定することでアニメーションが簡単に実現できます。

CSS3 Animate ItはjQuery/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

CSS3 Animate It - Animate Elements on Scroll

Jack-McCourt/css3-animate-it: CSS3 Animate-it

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2