【Animate.css】アニメーションサンプル一覧

2018年3月31日CSSAnimate.css, CSSライブラリ, CSSアニメーション

手軽にCSSアニメーションが実装可能なクロスブラウザなCSSライブラリ「Animate.css」で利用できる各アニメーションのサンプルコード集です

読み込み方法やカスタマイズの記事もあります

バウンド

キーフレームで弾む感じを演出するのもひと手間かかるので便利ですね

<div class="animated bounce">BOUNCE</div>
BOUNCE

また「bounce」には以下の方向等を指定したclassが定義されています

bounceInLeft bounceInRight bounceInUp bounceOut bounceOutDown bounceOutLeft bounceOutRight bounceOutUp

シェイク

左右に揺れるCSSアニメーション

<div class="animated shake">BOUNCE</div>
SHAKE

グラグラ

WOBBLEは「ぐらつき」という意味らしいです

<div class="animated wobble">BOUNCE</div>
WOBBLE

フラッシュ(点滅)

フラッシュ(点滅)させるCSSアニメーション

<div class="animated flash">flash</div>
FLASH

ハンドシェイク

WOBBLEより少し範囲が狭いですね

<div class="animated headShake"></div>
HAND SHAKE

ゼリー

ゼリーの様なアニメーション、ゼリーって英語だと「jello」っていう綴りなのですね

<div class="animated jello"></div>
JELLO

脈打つ、鼓動

「pulse」はパルスと読んで脈や鼓動という意味があるみたい

<div class="animated pulse"></div>
PULSE

スイング

なにやら風でボードが揺れている様なアニメーションですね

<div class="animated pulse"></div>
SWING

輪ゴム

「rubberBand」は輪ゴム

<div class="animated rubberBand"></div>
rubberBand

ファンファーレ

「tada」はファンファーレを真似た擬音語との事(英単語ではない)、発音はわからないけど日本語でいう「ジャーン」みたいなものらしい

<div class="animated tada"></div>
TABA

フェードイン

フェードインCSSアニメーション

<div class="animated fadeIn"></div>
FADE IN

また「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

FADE OUT

フリップ

フリップアニメーション

<div class="animated flip"></div>
FLIP

また「flip」アニメーションには以下の方向等を指定したclassが定義されています

flipInX flipInY flipOutX flipOutY

ローテーションイン

回転しながら現れます

<div class="animated rotateIn"></div>
ROTATE IN

また「rotateIn」アニメーションには以下の方向等を指定したclassが定義されています

rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight

ローテーションイン

回転しながら消えます

<div class="animated rotateOut"></div>
ROTATE OUT

また「rotateOut」アニメーションには以下の方向等を指定したclassが定義されています

rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight

ロールイン

周りながら指定位置に現れます

<div class="animated rollIn"></div>
ROLL IN

ロールイン

周りながら指定位置から離れて消えていきます

<div class="animated rollOut"></div>
ROLL OUT

ズームイン

ズームインアニメーション

<div class="animated zoomIn"></div>
ZOOM IN

また「zoomIn」アニメーションには以下の方向等を指定したclassが定義されています

zoomInDown zoomInLeft zoomInRight zoomInUp

ズームアウト

ズームアウトアニメーション

<div class="animated zoomOut"></div>
ZOOM OUT

また「zoomOut」アニメーションには以下の方向等を指定したclassが定義されています

zoomOutDown zoomOutLeft zoomOutRight zoomOutUp

スライドイン

スライドしながら現れます

<div class="animated slideInUp"></div>
SLIDE IN

また「slideIn」アニメーションには以下の方向等を指定したclassが定義されています

slideInUp slideInDown slideInLeft slideInRight slideInUp

スライドアウト

スライドしながら消えます

<div class="animated slideOutDown"></div>
SLIDE OUT

また「slideOut」アニメーションには以下の方向等を指定したclassが定義されています

slideOutDown slideOutLeft slideOutRight slideOutUp

ライトスピードイン

スライドしながら現れます、スライドとの違いは傾ける事で早さをイメージしたアニメーションみたいです

<div class="animated lightSpeedIn"></div>
lightSpeedIn

ライトスピードアウト

スライドしながら消えます

<div class="animated lightSpeedOut"></div>
lightSpeedOut

hinge

最後落ちてきます

<div class="animated hinge"></div>
HINGE

びっくり箱

SDNがあるバージョンは最新でなはいので、見たところまだ定義されていなく動かないかも

<div class="animated jackInTheBox"></div>
jackInTheBox

2018年3月31日CSSAnimate.css, CSSライブラリ, CSSアニメーション

Posted by Yousuke.U