【CSS】秒でアニメーションが実装できる”Animate.css”の紹介

  • 投稿日
  • 更新日
  • 著者 riki
  • カテゴリー CODE

アニメーション追加する時に毎回css書いたりjQuery書くのめんどくさいな。。
そう思っていたときに”Animate.css”の存在を知り、感動しました。
下記の手順で簡単に使い始める事ができます。

①headタグ内にCDNを追加
②動かしたい要素のclassにコードを追加

早速説明します。

①headタグ内にCDNを追加

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

上記コードをhead内へ追加して下さい。

※公式サイトより最新のバージョンを確認してください。

②動かしたい要素のclassにコードを追加

例えばタイトルをバウンドさせたい場合は以下のように書きます。

See the Pen
Untitled by Riki Kokuboi (@riki-kokubo)
on CodePen.

animate__animated

これはアニメーションを使用する場合にも必須のコードです。

animate__bounce

こっちがどのアニメーションをするかによって変わります。

アニメーションの種類はめちゃくちゃあるので公式サイトで調べてみて下さい。

終わりに

他にも、アニメーション開始時間を遅延させたり、回数を決めれられるオプションが色々あるので調べてみて下さい。

この記事で”Animate.css”の存在を知ってくれた人がいたら嬉しいです。