【コーディング初心者向け】Animate.cssの使い方

Posted on by

Animate.cssの使い方

Webサイトに動きをつけたい!!
そんな時にとても簡単にアニメーションをつける事が可能です!!

Animate.cssのサイトにアクセス

Animate.cssのサイトからダウンロード可能です。

https://daneden.github.io/animate.css/

Animate.css

CDNでの読み込みも可能です!!

https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css

Animate.cssの読み込み

読みこむだけで設定完了です。
後は動きをつけたい内容を記載していきます。
animate.css動きの一覧を記載していきます。

サンプル

BOUNCE

「infinite」をつけるとループで動きます。



bounce


bounceInLeft


bounceInRight


bounceInUp


bounceOut


bounceOutDown


bounceOutLeft


bounceOutRight


bounceOutUp

BOUNCE表示サンプル


bounce


bounce


bounce


bounce


bounce


bounce


bounce


bounce


bounce

SHAKE

「infinite」をつけるとループで動きます。



bounce

SHAKE表示サンプル


bounce

WOBBLE

「infinite」をつけるとループで動きます。



bounce

WOBBLE表示サンプル


wobble

FLASH

「infinite」をつけるとループで動きます。



bounce

FLASH表示サンプル


flash

HAND SHAKE

「infinite」をつけるとループで動きます。



bounce

HAND SHAKE表示サンプル


headShake

JELLO

「infinite」をつけるとループで動きます。



bounce

JELLO表示サンプル


jello

PULSE

「infinite」をつけるとループで動きます。



bounce

PULSE表示サンプル


pulse

SWING

「infinite」をつけるとループで動きます。



bounce

SWING表示サンプル


swing

RUBBER BAND

「infinite」をつけるとループで動きます。



bounce

RUBBER BAND表示サンプル


rubberBand

TABA

「infinite」をつけるとループで動きます。



bounce

TABA表示サンプル


tada

TABA

「infinite」をつけるとループで動きます。



bounce

TABA表示サンプル


tada

FADE IN

「infinite」をつけるとループで動きます。



bounce


bounceInLeft


bounceInRight


bounceInUp


bounceOut


bounceOutDown


bounceOutLeft


bounceOutRight


bounceOutUp

BOUNCE表示サンプル


bounce


fadeInDown


fadeInDownBig


fadeInLeft


fadeInLeftBig


fadeInRight


fadeInRightBig


fadeInUp


fadeInUpBig

FADE OUT

「infinite」をつけるとループで動きます。



fadeOut


fadeOutDown


fadeOutDownBig


fadeOutLeft


fadeOutLeftBig


fadeOutRight


fadeOutRightBig


fadeOutUp


fadeOutUpBig

FADE OUT表示サンプル


bounce


fadeInDown


fadeOutDownBig


fadeInLeftBig


fadeInRight


fadeInRightBig


fadeOutRightBig


fadeOutUp


fadeOutUpBig

FLIP

「infinite」をつけるとループで動きます。



flip


flipInX


flipInY


flipOutX


flipOutY

FLIP表示サンプル


flip


flipInX


flipInY


flipOutX


flipOutY

ROTATE IN

「infinite」をつけるとループで動きます。



rotateIn


rotateInDownLeft


rotateInDownRight


rotateInUpLeft


rotateInUpRight

ROTATE IN表示サンプル


rotateIn


rotateInDownLeft


rotateInDownRight


rotateInUpLeft


rotateInUpRight

ROTATE OUT

「infinite」をつけるとループで動きます。



rotateOut


rotateOutDownLeft


rotateOutDownRight


rotateOutUpLeft


rotateOutUpRight

ROTATE OUT表示サンプル


rotateOut


rotateOutDownLeft


rotateOutDownRight


rotateOutUpLeft


rotateOutUpRight

ROLL IN

「infinite」をつけるとループで動きます。



bounce

ROLL IN表示サンプル


rollIn

ROLL OUT

「infinite」をつけるとループで動きます。



bounce

ROLL OUT表示サンプル


rollOut

ZOOM IN

「infinite」をつけるとループで動きます。



zoomIn


zoomInDown


zoomInLeft


zoomInRight


zoomInUp

ZOOM IN表示サンプル


zoomIn


zoomInDown


zoomInLeft


zoomInRight


zoomInUp

ZOOM Out

「infinite」をつけるとループで動きます。



zoomOut


zoomOutDown


zoomOutLeft


zoomOutRight


zoomOutUp

ZOOM Out表示サンプル


zoomOut


zoomOutDown


zoomOutLeft


zoomOutRight


zoomOutUp

SLIDE IN

「infinite」をつけるとループで動きます。



slideInUp


slideInDown


slideInLeft


slideInRight

SLIDE IN表示サンプル


slideInUp


slideInUpDown


slideInDown


slideInLeft


slideInRight

lightSpeedIn

「infinite」をつけるとループで動きます。



bounce

lightSpeedIn表示サンプル


lightSpeedIn

lightSpeedOut

「OutfOutite」をつけるとループで動きます。



lightSpeedOut

lightSpeedOut表示サンプル


lightSpeedOut

HINGE

「OutfOutite」をつけるとループで動きます。



HINGE

HINGE表示サンプル


HINGE

Animate.css使い方動画