animate.cssのクラス(76種類)で設定することができるアニメーションのサンプルです。
animate.cssの設定の仕方についてはこちらの記事で紹介しています。

animate.cssでアニメーションをつける
このページでは、animate.css と ScrollTrigger.js を使用して、画面のスクロールに対応したアニメーションを実装する手順について紹介しています。
Contents
- animate.cssのクラス一覧
- No.1~No.10 bounce、flash、pulse…
- No.11~No.15 bounceIn~
- No.16~No.20 bounceOut~
- No.21~No.29 fadeIn~
- No.30~No.38 fadeOut~
- No.39~No.42 flip~
- No.43~No.44 lightSpeed~
- No.45~No.49 rotateIn~
- No.50~No.54 rotateOut~
- No.55 hinge
- No.56 jackInTheBox
- No.57~No.58 roll~
- No.59~No.63 zoomIn~
- No.64~No.68 zoomOut~
- No.69~No.72 slideIn~
- No.73~No.76 slideOut~
animate.cssのクラス一覧
No.1 ~ No.10 のクラスは画面のスクロールで表示されるたびに動作するよう設定しています。
No.11 以降のクラス(~In、~Out系統)は、最初に表示された時だけ(1回のみ)動作するように設定しています。
No.1~No.10 bounce、flash、pulse…

No.1 bounce / 跳ねる、バウンドする

No.2 flash / 閃光

No.3 pulse / 脈動

No.4 rubberBand / 輪ゴム

No.5 shake / 振る、揺らす

No.6 headShake

No.7 swing / 揺れる、揺り動かす

No.8 tada

No.9 wobble / ぐらつき、よろめき

No.10 jello
No.11~No.15 bounceIn~
少し弾みながら出現します。

No.11 bounceIn

No.12 bounceInDown

No.13 bounceInLeft

No.14 bounceInRight

No.15 bounceInUp
No.16~No.20 bounceOut~
少し弾んでから姿を消します。

No.16 bounceOut

No.17 bounceOutDown

No.18 bounceOutLeft

No.19 bounceOutRight

No.20 bounceOutUp
No.21~No.29 fadeIn~
少しずつ表示します。
Big がつくと移動距離が長くなります。

No.21 fadeIn

No.22 fadeInDown

No.23 fadeInDownBig

No.24 fadeInLeft

No.25 fadeInLeftBig

No.26 fadeInRight

No.27 fadeInRightBig

No.28 fadeInUp

No.29 fadeInUpBig
No.30~No.38 fadeOut~
少しずつ消えていきます。
Big がつくと移動距離が長くなります。

No.30 fadeOut

No.31 fadeOutDown

No.32 fadeOutDownBig

No.33 fadeOutLeft

No.34 fadeOutLeftBig

No.35 fadeOutRight

No.36 fadeOutRightBig

No.37 fadeOutUp

No.38 fadeOutUpBig
No.39~No.42 flip~
(指先などで)弾く、ひっくり返すような動きです。

No.39 flipInX

No.40 flipInY

No.41 flipOutX

No.42 flipOutY
No.43~No.44 lightSpeed~
光速

No.43 lightSpeedIn

No.44 lightSpeedOut
No.45~No.49 rotateIn~
回転しながら表示します。

No.45 rotateIn

No.46 rotateInDownLeft

No.47 rotateInDownRight

No.48 rotateInUpLeft

No.49 rotateInUpRight
No.50~No.54 rotateOut~
回転しながら非表示となります。

No.50 rotateOut

No.51 rotateOutDownLeft

No.52 rotateOutDownRight

No.53 rotateOutUpLeft

No.54 rotateOutUpRight
No.55 hinge
蝶番(ちょうつがい)

No.55 hinge
No.56 jackInTheBox

No.56 jackInTheBox
No.57~No.58 roll~
転がるような動きです。

No.57 rollIn

No.58 rollOut
No.59~No.63 zoomIn~
画面奥から手前に向かって表示します。

No.59 zoomIn

No.60 zoomInDown

No.61 zoomInLeft

No.62 zoomInRight

No.63 zoomInUp
No.64~No.68 zoomOut~
画面奥に去っていきます。

No.64 zoomOut

No.65 zoomOutDown

No.66 zoomOutLeft

No.67 zoomOutRight

No.68 zoomOutUp
No.69~No.72 slideIn~
滑らかに表示します。

No.69 slideInDown

No.70 slideInLeft

No.71 slideInRight

No.72 slideInUp
No.73~No.76 slideOut~
滑らかに非表示となります。

No.73 slideOutDown

No.74 slideOutLeft

No.75 slideOutDownRight

No.76 slideOutUp
-