【全アニメーション表示】Animate.cssの使い方

CODE
のり
のり

Webサイトに印象的なアニメーションをつけたいけど、どうやって実現すればいいんだろう?

こんな疑問に答えます。

今回はAnimate.cssというライブラリを使って、アニメーションを実装する方法と使用できるアニメーションのデモを紹介したいと思います。

Animate.cssとは

Animate.cssは、HTML要素にクラスを指定するだけでアニメーションを実装できるライブラリです。MITライセンスで配布されているので商用での利用も可能です。

77種類のアニメーションがあり、リンクサイトでデモが可能です。

Animate.cssの使用方法

基本の使い方

Animate.cssの使い方についてです。まず、以下のサイトからダウンロードをします。

■Animate.css
https://daneden.github.io/animate.css/

animate.cssがダウンロードされるので、サイトの適当な場所に配置し、HTMLにスタイルシートを適用させましょう。

HTMLの記載

<head>
  <link rel="stylesheet" href="animate.min.css">
</head>

あとは、アニメーションさせたいHTML要素のクラスにclass="animated アニメーション名"を記載だけです。 以下の例では、「bounce」というアニメーションをつけています。また、アニメーションをループさせたい場合はinfiniteをクラスにつけます。

See the Pen animate-css by Nori (@ysnoritnk) on CodePen.

簡単ですね!また、アニメーションの長さを変更したり、遅延させたりすることもできます!

アニメーション長さを変更する

長さの時間指定は出来ないですが、以下のクラスを追加すると速度を変化させることが出来ます。デフォルトは1秒です。

  • slowクラス:2秒かけてアニメーションを実行する
  • slowerクラス:3秒かけてアニメーションを実行する
  • fastクラス:0.8秒でアニメーションを実行する
  • fasterクラス:0.5秒でアニメーションを実行する

See the Pen animate-css-slow-slower by Nori (@ysnoritnk) on CodePen.

See the Pen animate-css-fast-faster by Nori (@ysnoritnk) on CodePen.

開始を遅延させる

通常は、ページが読み込まれた時または、何かトリガーとなった時にアニメーションが実行されますが、そのタイミングから遅延させることができます。

遅延をするには、delay-遅らせる秒数のクラスを指定します。

<div class="animated bounce delay-2s">開始を2秒遅らせる</div>
<div class="animated bounce delay-5s">開始を5秒遅らせる</div>

アニメーションの全デモ

いちいち確認するのは面倒だと思うので、最後にアニメーションのデモの一覧を記載しますので参考にしてください。bounceは先程のを参考にしてください。

Attention Seekers

See the Pen NQpgMV by Nori (@ysnoritnk) on CodePen.

See the Pen animate-css-shake-headShake-swing by Nori (@ysnoritnk) on CodePen.

See the Pen animate-css-tada-wobble-jello by Nori (@ysnoritnk) on CodePen.

See the Pen animate-css-heartBeat by Nori (@ysnoritnk) on CodePen.

Bouncing Entrances

See the Pen animete-css-bounceIn-bounceInDown-bounceInLeft by Nori (@ysnoritnk) on CodePen.

See the Pen animate-css-bounceInRight-bounceInUp by Nori (@ysnoritnk) on CodePen.

Bouncing Exits

See the Pen animate-css-bounceOut-bounceOutDown-boutnceOutLeft by Nori (@ysnoritnk) on CodePen.

See the Pen animate-css-bounceOutRight-bounceOutUp by Nori (@ysnoritnk) on CodePen.

Fading Entrances

See the Pen animate-css-fadeIn-fadeInDown-fadeInDownBib by Nori (@ysnoritnk) on CodePen.

See the Pen animate-css-fadeInLeft-fadeInLeftBig-fadeInRight by Nori (@ysnoritnk) on CodePen.

See the Pen animate-css-fadeInRightBig-fadeInUp-fadeInUpBig by Nori (@ysnoritnk) on CodePen.

Fading Exits

See the Pen animate-css-fadeOut-fadeoutDown-fadeOutDownBig by Nori (@ysnoritnk) on CodePen.

See the Pen animate-css-fadeOutLeft-fadeOutLeftBig-fadeOutRight by Nori (@ysnoritnk) on CodePen.

See the Pen animate-css-fadeOutRightBig-fadeOutUp-fadeOutUpBig by Nori (@ysnoritnk) on CodePen.

Flippers

See the Pen animate-css-flip-flipInX-flipInY by Nori (@ysnoritnk) on CodePen.

See the Pen animate-css-flipOutX-flipOutY by Nori (@ysnoritnk) on CodePen.

Lightspeed

See the Pen animate-css-lightSpeedIn-lightSpeedOut by Nori (@ysnoritnk) on CodePen.

Rotating Entrances

See the Pen animate-css-rotateIn-rotateInDownLeft-rotateInDownRight by Nori (@ysnoritnk) on CodePen.

See the Pen animate-css-rotateInUpLeft-rotateInUpRight by Nori (@ysnoritnk) on CodePen.

Rotating Exits

See the Pen animate-css-rotateOut-rotateOutDownLeft-rotateOutDownRight by Nori (@ysnoritnk) on CodePen.

See the Pen animate-css-rotateOutUpLeft-rotateOutUpRight by Nori (@ysnoritnk) on CodePen.

Sliding Entrances

See the Pen animate-css-slideIn-slideInDown-slideInLeft by Nori (@ysnoritnk) on CodePen.

See the Pen animate-css-slideInRight by Nori (@ysnoritnk) on CodePen.

Sliding Exits

See the Pen animate-css-slideOutUp-slideOutDown-slideOutLeft by Nori (@ysnoritnk) on CodePen.

See the Pen animate-css-slideOutRight by Nori (@ysnoritnk) on CodePen.

Zoom Entrances

See the Pen animate-zoomIn-zoomInDown-zoomInLeft by Nori (@ysnoritnk) on CodePen.

See the Pen animate-css-zoomInRight-zoomInUp by Nori (@ysnoritnk) on CodePen.

Zoom Exits

See the Pen animate-css-zoomOut-zoomOutDown-zoomOutLeft by Nori (@ysnoritnk) on CodePen.

See the Pen animate-css-zoomOutRight-zoomOutUp by Nori (@ysnoritnk) on CodePen.

Specials

See the Pen animate-css-hinge-jackInTheBox-rollIn by Nori (@ysnoritnk) on CodePen.

See the Pen animate-css-rollOut by Nori (@ysnoritnk) on CodePen.

まとめ

いかがでしたか?

Animate.cssはクラスを追加するだけの簡単で使いやすいライブラリです。さまざまなアニメーションがありますので、是非活用していきましょう!では!

コメント

タイトルとURLをコピーしました