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

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表示サンプル


bounce


bounce


bounce


bounce


bounce


bounce


bounce


bounce


bounce

SHAKE

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

SHAKE表示サンプル


bounce

WOBBLE

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

WOBBLE表示サンプル


wobble

FLASH

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

FLASH表示サンプル


flash

HAND SHAKE

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

HAND SHAKE表示サンプル


headShake

JELLO

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

JELLO表示サンプル


jello

PULSE

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

PULSE表示サンプル


pulse

SWING

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

SWING表示サンプル


swing

RUBBER BAND

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

RUBBER BAND表示サンプル


rubberBand

TABA

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

TABA表示サンプル


tada

TABA

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

TABA表示サンプル


tada

FADE IN

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

BOUNCE表示サンプル


bounce


fadeInDown


fadeInDownBig


fadeInLeft


fadeInLeftBig


fadeInRight


fadeInRightBig


fadeInUp


fadeInUpBig

FADE OUT

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

FADE OUT表示サンプル


bounce


fadeInDown


fadeOutDownBig


fadeInLeftBig


fadeInRight


fadeInRightBig


fadeOutRightBig


fadeOutUp


fadeOutUpBig

FLIP

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

FLIP表示サンプル


flip


flipInX


flipInY


flipOutX


flipOutY

ROTATE IN

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

ROTATE IN表示サンプル


rotateIn


rotateInDownLeft


rotateInDownRight


rotateInUpLeft


rotateInUpRight

ROTATE OUT

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

ROTATE OUT表示サンプル


rotateOut


rotateOutDownLeft


rotateOutDownRight


rotateOutUpLeft


rotateOutUpRight

ROLL IN

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

ROLL IN表示サンプル


rollIn

ROLL OUT

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

ROLL OUT表示サンプル


rollOut

ZOOM IN

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

ZOOM IN表示サンプル


zoomIn


zoomInDown


zoomInLeft


zoomInRight


zoomInUp

ZOOM Out

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

ZOOM Out表示サンプル


zoomOut


zoomOutDown


zoomOutLeft


zoomOutRight


zoomOutUp

SLIDE IN

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

SLIDE IN表示サンプル


slideInUp


slideInUpDown


slideInDown


slideInLeft


slideInRight

lightSpeedIn

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

lightSpeedIn表示サンプル


lightSpeedIn

lightSpeedOut

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

lightSpeedOut表示サンプル


lightSpeedOut

HINGE

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

HINGE表示サンプル


HINGE

Animate.css使い方動画

%d人のブロガーが「いいね」をつけました。