IT Programming

Animate.cssの使い方【2つの手順でカンタンにできます】

 

Animate.cssに興味がある人
「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の公式サイトで調べることができます。

recommend

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でカンタンにアニメーションが実装できます

手順をまとめておきます。

  1. Animate.cssを読みこむ
  2. アニメーションのコードを書いていく

めっちゃシンプルですよね(。•ω- 。) 

Animate.cssで、サイトのレベルを一気に上げてみてください。

 

これで以上になります。

スクロールに合わせてアニメーションを実装させたい方は、下記の記事をどうぞ。

スクロールでアニメーション 実装方法

 


スポンサードリンク

-IT, Programming

© Copyright March/2020 タクミ