【簡単】CSSアニメーション（animate.cssライブラリ使用）

今回は、案件で使用したアニメーションライブラリ「animate.css」について、まとめます。

また、アニメーション開始のタイミング操作
についても最後に紹介します。

ライブラリを使用することで、
指定されたcssを付けるだけで簡単にアニメーションを実現できます。

アニメーション例

たくさんあるので一部だけですが、
アニメーションの例です。

See the Pen animate.css by emi (@emi-jp) on CodePen.

一番簡単なのは、
下記CDNを読み込む方法。
（ただし、ネットがない環境では動かない。）

<!-- <head>タグ内で読み込む -->

  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />

animate.css公式サイトから付けたいアニメーションを探します。

①アニメーション名をクリックすると②「Animate.css」の文字が動き、
実際のアニメーションを確認できます。

好きなアニメーションを見つけたら、③クラス名をコピーします。
（例：「bounce」のクラス名「animate__bounce」をコピー。）

アニメーションを付けたい要素に、下記クラス名を付けます。

・「animate__animated」（animate.cssの機能を使うために、必ず必要）

・「animate__bounce」（選んだアニメーション毎に異なるクラス名）

↓このようにクラス名追加

<div class="animate__animated animate__bounce">
　アニメーションさせたい要素です。
</div>

上記、二つのCSSの追加で、
アニメーションの実装は可能です。

さらに、ずっとアニメーションをさせておきたい場合は、
下記を追加します。

「animate__infinite」

↓さらにずっとアニメーションさせるためのクラスを追加

<div class="animate__animated animate__bounce animate__infinite">
　アニメーションさせたい要素です。
</div>

上記のコードだけでは発火（アニメーションが起こる）タイミングが操作できないので、
ブラウザの読み込みでアニメーションが始まります。

要素が画面に入ったタイミングでアニメーション開始させたいときは、
jQueryを使用します。

私が案件でよく使用するのは下記です。

使用イメージは下記