手軽で簡単!!CSS3とJSで様々なアニメーション効果を付ける方法

2015.3.13 (金)
main_catch

今回は手軽にCSSアニメーションを作成することが出来るCSSライブラリ「Animate.css」をご紹介いたします。

「Animate.css」をダウンロード

配布元からコードをダウンロードされて下さい。ダウンロードしたZIPを解凍すると沢山ファイルがあると思いますが、使用するのは「animate.css」「animate.min.css」のどちらかになります。今回の記事では「animate.css」を使用します。

「Animate.css」使用準備

ヘッド内に「animate.css」を読み込んでいただくと使用準備は完了です。

<link rel=”stylesheet” type=”text/css” href=”ファイルパス/animate.css”>

「Animate.css」の使用方法

アニメーションを追加したい要素に追加したいアニメーションのclass名と「animated」というクラス名を追加するのみでOKです。

<p class=”animated flash”>flash</p>

各ボタン(といっても押せないですが…)の上にマウスを合わせて頂くとアニメーションします。ボタンに記述している英単語がそのアニメーションの名前となります。

Attention seekers (注意を促す時に使えるアニメーション)

  • flash
  • bounce
  • shake
  • tada

Fading entrances (フェードしながら、表示するアニメーション)

  • fadeIn
  • fadeInDown
  • fadeInLeft
  • fadeInRight
  • fadeInDownBig
  • fadeInLeftBig
  • fadeInRightBig

Fading exits (フェードしながら、消えるアニメーション)

※一度オンマウスしてしまうと表示されなくなります(笑)

  • fadeOut
  • fadeOutUp
  • fadeOutDown
  • fadeOutLeft
  • fadeOutRight
  • fadeOutUpBig
  • fadeOutDownBig
  • fadeOutLeftBig
  • fadeOutRightBig

Bouncing entrances (バウンドしながら、表示するアニメーション)

※一度オンマウスしてしまうと表示されなくなります(笑)

  • bounceOut
  • bounceOutDown
  • bounceOutUp
  • bounceOutLeft
  • bounceOutRight

Rotating entrances (回転しながら、表示するアニメーション)

  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight

Rotating exits (回転しながら、消えるアニメーション)

※一度オンマウスしてしまうと表示されなくなります(笑)

  • rotateOut
  • rotateOutDownLeft
  • rotateOutDownRight
  • rotateOutUpLeft
  • rotateOutUpRight

無限にアニメーションさせたい場合

実はこの「Animate.css」は単体ではページが表示された時に一度だけアニメーションして終わりという仕様になっています。無限にアニメーションさせたい場合は。下記のように記述します。

無限ループさせたい場合

<p class=”animated flash infinite”>flash</p>

class名に「infinite」を付随させることで無限にループします

  • flash

サンプルの様にオンマウスでアニメーションさせたい場合

オンマウスでアニメーションをするには要素にトリガーを設定できるようにするJSAni.JSと併用します。(←こちらのリンクからダウンロードされて下さい)※JQueryは使用していないので読み込みの必要はありません

「Ani.JS」を</body>の直前に配置

<script src=”js/anijs.js”></script>
</body>
</html>

オンマウスでアニメーションしたい要素のコードをclass名ではなくdata-anijsに変更

<p data-anijs=”if: mouseover, do: flash animated”>flash</p>

少し複雑な雰囲気になってしまいますが、ここで重要になるのは「do:」の後の「flash animated」です。ここを自分のしたいアニメーション名にする事でオンマウスでアニメーションさせる事が可能になります。

  • flash

「if:」の後のmouseoverをclickに変更するとクリックがトリガーとなります。

<p data-anijs=”if: click, do: flash animated”>flash</p>
  • flash

スクロールが要素に達したらというトリガーでアニメーションを実行させるようにすると、パララックス効果を使ったサイトの華やかさも増しそうですね!!
ニワカソフトでは常に新しいことに挑戦し、より良いものを皆様にご提供できるよう努力しております。ぜひホームページの新規作成・リニューアルはニワカソフトにご相談ください!!