【Animate.css】アニメーションサンプル一覧
手軽にCSSアニメーションが実装可能なクロスブラウザなCSSライブラリ「Animate.css」で利用できる各アニメーションのサンプルコード集です
読み込み方法やカスタマイズの記事もあります
https://naruhodo.repop.jp/animate-css/バウンド
キーフレームで弾む感じを演出するのもひと手間かかるので便利ですね
<div class="animated bounce">BOUNCE</div>また「bounce」には以下の方向等を指定したclassが定義されています
bounceInLeft bounceInRight bounceInUp bounceOut bounceOutDown bounceOutLeft bounceOutRight bounceOutUp
シェイク
左右に揺れるCSSアニメーション
<div class="animated shake">BOUNCE</div>グラグラ
WOBBLEは「ぐらつき」という意味らしいです
<div class="animated wobble">BOUNCE</div>フラッシュ（点滅）
フラッシュ（点滅）させるCSSアニメーション
<div class="animated flash">flash</div>ハンドシェイク
WOBBLEより少し範囲が狭いですね
<div class="animated headShake"></div>ゼリー
ゼリーの様なアニメーション、ゼリーって英語だと「jello」っていう綴りなのですね
<div class="animated jello"></div>脈打つ、鼓動
「pulse」はパルスと読んで脈や鼓動という意味があるみたい
<div class="animated pulse"></div>スイング
なにやら風でボードが揺れている様なアニメーションですね
<div class="animated pulse"></div>輪ゴム
「rubberBand」は輪ゴム
<div class="animated rubberBand"></div>ファンファーレ
「tada」はファンファーレを真似た擬音語との事（英単語ではない）、発音はわからないけど日本語でいう「ジャーン」みたいなものらしい
<div class="animated tada"></div>フェードイン
フェードインCSSアニメーション
<div class="animated fadeIn"></div>また「fadeIn」アニメーションには以下の方向等を指定したclassが定義されています
fadeInDown fadeInDownBig fadeInLeft fadeInLeftBig fadeInRight fadeInRightBig fadeInUp fadeInUpBig
フェードアウト
フェードアウトCSSアニメーション
<div class="animated fadeOut"></div>また以下の方向等を指定したclassが定義されています
fadeOutDown fadeOutDownBig fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig fadeOutUp fadeOutUpBig
フリップ
フリップアニメーション
<div class="animated flip"></div>また「flip」アニメーションには以下の方向等を指定したclassが定義されています
flipInX flipInY flipOutX flipOutY
ローテーションイン
回転しながら現れます
<div class="animated rotateIn"></div>また「rotateIn」アニメーションには以下の方向等を指定したclassが定義されています
rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight
ローテーションイン
回転しながら消えます
<div class="animated rotateOut"></div>また「rotateOut」アニメーションには以下の方向等を指定したclassが定義されています
rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight
ロールイン
周りながら指定位置に現れます
<div class="animated rollIn"></div>ロールイン
周りながら指定位置から離れて消えていきます
<div class="animated rollOut"></div>ズームイン
ズームインアニメーション
<div class="animated zoomIn"></div>また「zoomIn」アニメーションには以下の方向等を指定したclassが定義されています
zoomInDown zoomInLeft zoomInRight zoomInUp
ズームアウト
ズームアウトアニメーション
<div class="animated zoomOut"></div>また「zoomOut」アニメーションには以下の方向等を指定したclassが定義されています
zoomOutDown zoomOutLeft zoomOutRight zoomOutUp
スライドイン
スライドしながら現れます
<div class="animated slideInUp"></div>また「slideIn」アニメーションには以下の方向等を指定したclassが定義されています
slideInUp slideInDown slideInLeft slideInRight slideInUp
スライドアウト
スライドしながら消えます
<div class="animated slideOutDown"></div>また「slideOut」アニメーションには以下の方向等を指定したclassが定義されています
slideOutDown slideOutLeft slideOutRight slideOutUp
ライトスピードイン
スライドしながら現れます、スライドとの違いは傾ける事で早さをイメージしたアニメーションみたいです
<div class="animated lightSpeedIn"></div>ライトスピードアウト
スライドしながら消えます
<div class="animated lightSpeedOut"></div>hinge
最後落ちてきます
<div class="animated hinge"></div>びっくり箱
SDNがあるバージョンは最新でなはいので、見たところまだ定義されていなく動かないかも
<div class="animated jackInTheBox"></div>