はじめに
CSSのライブラリAnimate.cssを使えば、簡易的なアニメーションは簡単に実装する事ができるらしい。
公式サイト、Downloadはこちら
See the Pen yrbMyB by szaizen (@szaizen) on CodePen.
?!?!?!?!?!
めっちゃ簡単にできたよ( ^ω^)
CSSだけのライブラリって使いやすくていいですね(震え声)
初期準備
使用するにはまずlinkタグでライブラリを読み込みます。
ダウンロードして呼び出しても良し、下記をコピーするだけでも良し。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
使い方
あとは、使いたいタグに animatedクラスと好きな動きのクラスをつけるだけ。
動きは公式サイトから試すことができます。
例えばrollInを選んでAnimate itボタンを押すと上の文字が動きます。これがrollInクラスの動き。
この動き使いたい!っていう時は
<div class="animated rollIn">動かしたい文字</div>
この記述でOK。
他の機能
無限ループ
他にも、ずーっと同じ動きをさせておきたい時は infiniteクラスをつけると繰り返してくれる。
最後に
こんな簡単に使えて、軽量なCSSライブラリ、他にもたくさんあるみたいなので色々使ってみようと思います!!
See the Pen Animate.css by szaizen (@szaizen) on CodePen.