目次
- 1 Animate.cssの使い方
- 1.1 Animate.cssのサイトにアクセス
- 1.2 Animate.cssの読み込み
- 1.2.1 サンプル
- 1.2.2 BOUNCE
- 1.2.3 BOUNCE表示サンプル
- 1.2.4 SHAKE
- 1.2.5 SHAKE表示サンプル
- 1.2.6 WOBBLE
- 1.2.7 WOBBLE表示サンプル
- 1.2.8 FLASH
- 1.2.9 FLASH表示サンプル
- 1.2.10 HAND SHAKE
- 1.2.11 HAND SHAKE表示サンプル
- 1.2.12 JELLO
- 1.2.13 JELLO表示サンプル
- 1.2.14 PULSE
- 1.2.15 PULSE表示サンプル
- 1.2.16 SWING
- 1.2.17 SWING表示サンプル
- 1.2.18 RUBBER BAND
- 1.2.19 RUBBER BAND表示サンプル
- 1.2.20 TABA
- 1.2.21 TABA表示サンプル
- 1.2.22 TABA
- 1.2.23 TABA表示サンプル
- 1.2.24 FADE IN
- 1.2.25 BOUNCE表示サンプル
- 1.2.26 FADE OUT
- 1.2.27 FADE OUT表示サンプル
- 1.2.28 FLIP
- 1.2.29 FLIP表示サンプル
- 1.2.30 ROTATE IN
- 1.2.31 ROTATE IN表示サンプル
- 1.2.32 ROTATE OUT
- 1.2.33 ROTATE OUT表示サンプル
- 1.2.34 ROLL IN
- 1.2.35 ROLL IN表示サンプル
- 1.2.36 ROLL OUT
- 1.2.37 ROLL OUT表示サンプル
- 1.2.38 ZOOM IN
- 1.2.39 ZOOM IN表示サンプル
- 1.2.40 ZOOM Out
- 1.2.41 ZOOM Out表示サンプル
- 1.2.42 SLIDE IN
- 1.2.43 SLIDE IN表示サンプル
- 1.2.44 lightSpeedIn
- 1.2.45 lightSpeedIn表示サンプル
- 1.2.46 lightSpeedOut
- 1.2.47 lightSpeedOut表示サンプル
- 1.2.48 HINGE
- 1.2.49 HINGE表示サンプル
- 1.3 Animate.css使い方動画
Animate.cssの使い方
Webサイトに動きをつけたい!!
そんな時にとても簡単にアニメーションをつける事が可能です!!
Animate.cssのサイトにアクセス
Animate.cssのサイトからダウンロード可能です。
https://daneden.github.io/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」をつけるとループで動きます。
SLIDE IN表示サンプル
lightSpeedIn
「infinite」をつけるとループで動きます。
bounce
lightSpeedIn表示サンプル
lightSpeedIn
lightSpeedOut
「OutfOutite」をつけるとループで動きます。
lightSpeedOut
lightSpeedOut表示サンプル
lightSpeedOut
HINGE
「OutfOutite」をつけるとループで動きます。
HINGE
HINGE表示サンプル
HINGE
