【CSS】「Animate.css」を使ってテキストや矢印をアニメーションで表示する

簡単にcssアニメーションが実装できる、「Animate.css」をご紹介します。

アニメーションの種類などは、下記の公式サイトで紹介しています。

⇒ Animate.css 公式サイト

◆使い方

まずは、「animate.css」を外部読み込みします。

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">

後は、必須の「animated」と、動き用のクラスを指定するだけで実装できます。

例えばバウンドするアニメーションは「bounce」です。

例：<h1 class="animated bounce">テキスト</h1>

色々と実装してみたので、よろしければデモページをご覧ください。

ソースもろもろは全てここに書くと長くなってしまうので、ご利用を希望の方はファイルをダウンロードしてください。