2020-02-12動きのあるウェブサイトは、それだけでちょっとリッチな感じがしますよね!「Animate.css」は、簡単な記述でサイト上の要素にアニメーションを実装することができる有名なライブラリ。daneden.github.ioAnimate.csshttps://daneden.github.io/animate.css/自分で1からCSSアニメーションを作ろうと思うと手間も時間もかかりますが、この「Animate.css」を使えば、ものの数分でつるつる動くアニメーションが使えるんです。Animate.css」をクリックすると、CSSファイルがダウンロードできます。あとはそれをサイトのヘッダで読み込めばOK。href="animate.min.css">CDNで読み込むあるいは、CDNを利用しての読み込みも可能です。href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">使い方あとは、設定したい要素に対してクラス「animated」とアニメーション名、必要に応じてオプションを記述すればOK。infinite">文字が弾むよ!</div>このように要素がアニメーションしてくれます。文字が弾むよ!簡単ですね!アニメーションの種類は、Animate.cssのサイトでプルダウンから選択することで確認ができます。オプションループさせる通常はアニメーションは1回のみですが、クラスに「infinite」を追加すると、先ほどの例のようにアニメーションがループします。X秒遅れて動作させるクラス「Delay」を追加すると、動作の開始を秒単位で遅らせることができます。delay-3s">3秒遅れ</div>と記述すると、何も記述しない場合より3秒遅れてアニメーションします。動作のスピードを変更するクラス「slow」「slower」「fast」「faster」を追加すると、アニメーションの速度を制御できます。0.5秒そのほか、オプションの詳細はGitHubでも確認できます。https://github.com/daneden/animate.cssというわけで、手軽にアニメーションを実装することができる「Animate.css」。サイトに動きが欲しい時に使ってみてはどうでしょうか。Reserved.ホームプライバシーポリシーお問い合わせ。