「Animate.css」っていうのでアニメーションができるらしいけど、どうやるんだろう？カンタンにできるのかなあ？
そうです！Animate.cssを使えば、アニメーションがカンタンに実装できます。
この記事では、Animate.cssの使い方を2つの手順でご紹介したあと、Animate.cssのオプションについてもご紹介します。
記事の流れ
- 手順①：Animate.cssを読みこむ
- 手順②：アニメーションのコードを書いていく
- オプション紹介
手順①:Animate.cssを読みこむ
Animate.cssの読み込み方法は主に2つあります。
- Animate.cssのサイトに行ってファイルをダウンロードする
- Animate.cssのCDNを読み取る
CDNを使ったほうが読み込むまでの時間が短いので、
CDNで読み取りたい方は、スキップしてください。
Animate.cssのサイトに行ってファイルをダウンロードする方法
Animate.cssの公式サイトへ行きましょう。
「Download Animate.css」をクリックします。
上記の画面が表示されるので、
右クリック→「名前を付けて保存」をクリックで名前をつける（ファイル名は、デフォルトの状態では"animate.css"という名前になっていますが、このままでもOKです。）
さきほど名前をつけたファイルを上記のようにコピペしましょう。
See the Pen
YzywgYK by takumi takekawa (@takumi7293)
on CodePen.
上記のようにhtmlファイルのhead部分で、名前をつけたCSSファイルを読み取ります。
これでOKです！
うまく行かなかったという方は、
「相対パスを使った読み込み方を解説！【パターン別に解説します】」という記事をご参照ください。
違うフォルダにCSSファイルをコピペした可能性があります。
CDNで読みこむ方法
CDNというものを使えば、わざわざファイルをダウンロードしてこなくてもAniimate.cssを読みこむことができます。
See the Pen
dyYGrJB by takumi takekawa (@takumi7293)
on CodePen.
上記のコードをコピペしてhtmlファイルのhead部分につければOKです。
Animate.cssを読みこむのはCDNのほうが早いですね♪
ぼくはCDNを使ったやり方のほうが好みです笑
手順②:アニメーションのコードを書いていく
👇こんな感じに記述しましょう。
See the Pen
VwveEMd by takumi takekawa (@takumi7293)
on CodePen.
タグのクラス名に"animated"をつけて、アニメーションの名前をつけます。
上記の場合は"bounce"というアニメーション名です。
どのようなアニメーションがあるのかは、Animate.cssの公式サイトで調べることができます。
spanなどのinlineのタグにアニメーションをさせる場合はそのままではうまくいかないので、
"display:block;"や"display:inline-block;"
を指定してみてください。
実際に、"shake"というアニメーション名にしてみましょう。
See the Pen
vYNLVdV by takumi takekawa (@takumi7293)
on CodePen.
上記のように、"bounce"というクラス名を、"shake"に変えるだけです。
その他のオプション
infiniteで、アニメーションを永遠に
今まで書いてきたコードの中に"infinite"というクラス名がありました。
"infinite"は、アニメーションを永遠に続けさせることができるクラス名です。
一回だけアニメーションさせたい方は、"infinite"のクラス名は不要です。
アニメーションを遅らせたり、スピードを変えたり
See the Pen
dyYGgKj by takumi takekawa (@takumi7293)
on CodePen.
アニメーションのスピードは、クラス名を"fast"や"slow"にすることで、早くしたり遅くしたりできます。
また、"delay-5s"のように"delay-【時間】s"というクラス名を付けることで、アニメーションを遅らせることができます。
上記のコードでは、"fast"と"delay-5s"のクラス名があるので、「5秒後にアニメーションを早くする」というアニメーションを実装させています。
まとめ：Animate.cssでカンタンにアニメーションが実装できます
手順をまとめておきます。
- Animate.cssを読みこむ
- アニメーションのコードを書いていく
めっちゃシンプルですよね(｡•ω- ｡)
Animate.cssで、サイトのレベルを一気に上げてみてください。
これで以上になります。
スクロールに合わせてアニメーションを実装させたい方は、下記の記事をどうぞ。