目次
- 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使い方動画
- 1.4 Related Posts
- 1.5 いいね:
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動きの一覧を記載していきます。
サンプル
|
1 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css" /> |
BOUNCE
「infinite」をつけるとループで動きます。
|
1 2 3 4 5 6 7 8 9 10 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css" /> <p class="animated bounce infinite">bounce</p> <p class="animated bounceInLeft infinite">bounceInLeft</p> <p class="animated bounceInRight infinite">bounceInRight</p> <p class="animated bounceInUp infinite">bounceInUp</p> <p class="animated bounceOut infinite">bounceOut</p> <p class="animated bounceOutDown infinite">bounceOutDown</p> <p class="animated bounceOutLeft infinite">bounceOutLeft</p> <p class="animated bounceOutRight infinite">bounceOutRight</p> <p class="animated bounceOutUp infinite">bounceOutUp</p> |
BOUNCE表示サンプル
bounce
bounce
bounce
bounce
bounce
bounce
bounce
bounce
bounce
SHAKE
「infinite」をつけるとループで動きます。
|
1 2 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css" /> <p class="animated shake infinite">bounce</p> |
SHAKE表示サンプル
bounce
WOBBLE
「infinite」をつけるとループで動きます。
|
1 2 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css" /> <p class="animated wobble infinite">bounce</p> |
WOBBLE表示サンプル
wobble
FLASH
「infinite」をつけるとループで動きます。
|
1 2 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css" /> <p class="animated flash infinite">bounce</p> |
FLASH表示サンプル
flash
HAND SHAKE
「infinite」をつけるとループで動きます。
|
1 2 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css" /> <p class="animated headShake infinite">bounce</p> |
HAND SHAKE表示サンプル
headShake
JELLO
「infinite」をつけるとループで動きます。
|
1 2 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css" /> <p class="animated jello infinite">bounce</p> |
JELLO表示サンプル
jello
PULSE
「infinite」をつけるとループで動きます。
|
1 2 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css" /> <p class="animated pulse infinite">bounce</p> |
PULSE表示サンプル
pulse
SWING
「infinite」をつけるとループで動きます。
|
1 2 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css" /> <p class="animated swing infinite">bounce</p> |
SWING表示サンプル
swing
RUBBER BAND
「infinite」をつけるとループで動きます。
|
1 2 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css" /> <p class="animated rubberBand infinite">bounce</p> |
RUBBER BAND表示サンプル
rubberBand
TABA
「infinite」をつけるとループで動きます。
|
1 2 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css" /> <p class="animated tada infinite">bounce</p> |
TABA表示サンプル
tada
TABA
「infinite」をつけるとループで動きます。
|
1 2 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css" /> <p class="animated tada infinite">bounce</p> |
TABA表示サンプル
tada
FADE IN
「infinite」をつけるとループで動きます。
|
1 2 3 4 5 6 7 8 9 10 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css" /> <p class="animated fadeIn infinite">bounce</p> <p class="animated fadeInDown infinite">bounceInLeft</p> <p class="animated fadeInDownBig infinite">bounceInRight</p> <p class="animated fadeInLeft infinite">bounceInUp</p> <p class="animated fadeInLeftBig infinite">bounceOut</p> <p class="animated fadeInRight infinite">bounceOutDown</p> <p class="animated fadeInRightBig infinite">bounceOutLeft</p> <p class="animated fadeInUp infinite">bounceOutRight</p> <p class="animated fadeInUpBig infinite">bounceOutUp</p> |
BOUNCE表示サンプル
bounce
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
FADE OUT
「infinite」をつけるとループで動きます。
|
1 2 3 4 5 6 7 8 9 10 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css" /> <p class="animated fadeOut infinite">fadeOut</p> <p class="animated fadeOutDown infinite">fadeOutDown</p> <p class="animated fadeOutDownBig infinite">fadeOutDownBig</p> <p class="animated fadeOutLeft infinite">fadeOutLeft</p> <p class="animated fadeOutLeftBig infinite">fadeOutLeftBig</p> <p class="animated fadeOutRight infinite">fadeOutRight</p> <p class="animated fadeOutRightBig infinite">fadeOutRightBig</p> <p class="animated fadeOutUp infinite">fadeOutUp</p> <p class="animated fadeOutUpBig infinite">fadeOutUpBig</p> |
FADE OUT表示サンプル
bounce
fadeInDown
fadeOutDownBig
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeOutRightBig
fadeOutUp
fadeOutUpBig
FLIP
「infinite」をつけるとループで動きます。
|
1 2 3 4 5 6 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css" /> <p class="animated flip infinite">flip</p> <p class="animated flipInX infinite">flipInX</p> <p class="animated flipInY infinite">flipInY</p> <p class="animated flipOutX infinite">flipOutX</p> <p class="animated flipOutY infinite">flipOutY</p> |
FLIP表示サンプル
flip
flipInX
flipInY
flipOutX
flipOutY
ROTATE IN
「infinite」をつけるとループで動きます。
|
1 2 3 4 5 6 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css" /> <p class="animated rotateIn infinite">rotateIn</p> <p class="animated rotateInDownLeft infinite">rotateInDownLeft</p> <p class="animated rotateInDownRight infinite">rotateInDownRight</p> <p class="animated rotateInUpLeft infinite">rotateInUpLeft</p> <p class="animated rotateInUpRight infinite">rotateInUpRight</p> |
ROTATE IN表示サンプル
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
ROTATE OUT
「infinite」をつけるとループで動きます。
|
1 2 3 4 5 6 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css" /> <p class="animated rotateOut infinite">rotateOut</p> <p class="animated rotateOutDownLeft infinite">rotateOutDownLeft</p> <p class="animated rotateOutDownRight infinite">rotateOutDownRight</p> <p class="animated rotateOutUpLeft infinite">rotateOutUpLeft</p> <p class="animated rotateOutUpRight infinite">rotateOutUpRight</p> |
ROTATE OUT表示サンプル
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
ROLL IN
「infinite」をつけるとループで動きます。
|
1 2 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css" /> <p class="animated rollIn infinite">bounce</p> |
ROLL IN表示サンプル
rollIn
ROLL OUT
「infinite」をつけるとループで動きます。
|
1 2 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css" /> <p class="animated rollOut infinite">bounce</p> |
ROLL OUT表示サンプル
rollOut
ZOOM IN
「infinite」をつけるとループで動きます。
|
1 2 3 4 5 6 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css" /> <p class="animated zoomIn infinite">zoomIn</p> <p class="animated zoomInDown infinite">zoomInDown</p> <p class="animated zoomInLeft infinite">zoomInLeft</p> <p class="animated zoomInRight infinite">zoomInRight</p> <p class="animated zoomInUp infinite">zoomInUp</p> |
ZOOM IN表示サンプル
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
ZOOM Out
「infinite」をつけるとループで動きます。
|
1 2 3 4 5 6 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css" /> <p class="animated zoomOut infinite">zoomOut</p> <p class="animated zoomOutDown infinite">zoomOutDown</p> <p class="animated zoomOutLeft infinite">zoomOutLeft</p> <p class="animated zoomOutRight infinite">zoomOutRight</p> <p class="animated zoomOutUp infinite">zoomOutUp</p> |
ZOOM Out表示サンプル
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
SLIDE IN
「infinite」をつけるとループで動きます。
|
1 2 3 4 5 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css" /> <p class="animated slideInUp infinite">slideInUp</p> <p class="animated slideInDown infinite">slideInDown</p> <p class="animated slideInLeft infinite">slideInLeft</p> <p class="animated slideInRight infinite">slideInRight</p> |
SLIDE IN表示サンプル
lightSpeedIn
「infinite」をつけるとループで動きます。
|
1 2 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css" /> <p class="animated lightSpeedIn infinite">bounce</p> |
lightSpeedIn表示サンプル
lightSpeedIn
lightSpeedOut
「OutfOutite」をつけるとループで動きます。
|
1 2 |
<lOutk rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css" /> <p class="animated lightSpeedOut infinite">lightSpeedOut</p> |
lightSpeedOut表示サンプル
lightSpeedOut
HINGE
「OutfOutite」をつけるとループで動きます。
|
1 2 |
<lOutk rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css" /> <p class="animated hinge infinite">HINGE</p> |
HINGE表示サンプル
HINGE
