今回はAnimate.cssの使い方を紹介します。
おねしゃす
Animate.cssとは
Animate.cssは対象の要素に様々なアニメーションを付与できるCSSのライブラリです。
ざっくりいうと、
HTMLのclassに対して、予め用意された文字列を記述するだけでアニメーションを作れてしまう便利なやつです。
Animate.cssのサンプル
実際に使ってみるとこのようになります。
See the Pen animated-css-01 by WEB-DEN (@Yukiwebcreate) on CodePen.
↑アニメーションの種類は大変豊富に用意されているのですが、とりあえず３つだけピックアップしています。
これがclass名を書くだけで実現できるなんてすごいですね。
▼では実際の使い方を見ていきましょう▼
Animate.cssの使い方
Animate.cssを使う為には、Animate.css自体をダウンロードして読み込むか、CDNを利用して読み込む必要があります。
ダウンロードして読み込む方法
Animate.cssのGitHubページから「Code」→「Download Zip」からダウンロードします。
保存したファイルの中からanimate.min.cssを参照して使用します。
<link rel="stylesheet" href="ディレクトリ名/animate.min.css">CDNで読み込む場合方法
CDNの場合は下記のようにcloudflareのURLを使用するといいでしょう。（verは4.1.1を使用しています)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">このコードを<head></head>内に書けば利用の準備はOKです。
Animate.cssの記述方法
バージョン３系と４系では書き方が異なるのでご注意ください。
さて、Animate.cssが用意出来たら、アニメーションさせたい要素にクラス名をつけていきます。
例えば跳ねるアニメーションをループさせたい場合は、下記のようになります。
<div class="example animate__animated animate__bounce animate__infinite"></div>※exampleはこちらで勝手につくったものなので無視してください
animate__animatedはanimate.cssを使用するために必須のクラス名です。これは必ず書いてください。
animate__bounceはアニメーションの種類を指定しています。bounceが跳ねるという意味ですね。
animate__infiniteはそのアニメーションを「無限ループさせる」という意味です。
これだけでアニメーションは完成です。
超簡単！
アニメーションの繰り返し回数の指定
アニメーションの繰り返し回数を指定したいときは、
<div class="example animate__animated animate__bounce animate__repeat-1"></div>のように最後に数字を入れることで回数を指定できます。
無限に繰り返したい場合はanimate__infiniteを使いましょう。
アニメーションの開始を遅延させる
アニメーションの開始は即時ではなく秒数を遅らせることができます。
遅延させる時間1~5秒までは事前に用意されたクラスがあるので必要に応じて使用してみてください。
| animate__delay-1s | 開始を1秒遅らせる |
| animate__delay-2s | 開始を2秒遅らせる |
| animate__delay-3s | 開始を3秒遅らせる |
| animate__delay-4s | 開始を4秒遅らせる |
| animate__delay-5s | 開始を5秒遅らせる |
その他のアニメーション
サンプルで紹介した以外にも、非常に多くのアニメーションが用意されています。
公式サイトで全てのプリセットアニメーションが閲覧できるので、
実際に見てみて気に入ったものがあれば「コピー」ボタンを押せばクラス名をコピーできます。
それをそのまま使用すれば同じアニメーションが使用できるので是非使ってみてください。
便利そう！使ってみます
