animate.cssクラス一覧

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

animate.cssでアニメーションをつける
このページでは、animate.css と ScrollTrigger.js を使用して、画面のスクロールに対応したアニメーションを実装する手順について紹介しています。

animate.cssのクラス一覧

No.1 ~ No.10 のクラスは画面のスクロールで表示されるたびに動作するよう設定しています。
No.11 以降のクラス(~In、~Out系統)は、最初に表示された時だけ(1回のみ)動作するように設定しています。

No.1~No.10 bounce、flash、pulse…

bounce
No.1 bounce / 跳ねる、バウンドする
flash
No.2 flash / 閃光
pulse
No.3 pulse / 脈動
rubberBand
No.4 rubberBand / 輪ゴム
shake
No.5 shake / 振る、揺らす
headshake
No.6 headShake
swing
No.7 swing / 揺れる、揺り動かす
tada
No.8 tada
wobble
No.9 wobble / ぐらつき、よろめき
jello
No.10 jello

No.11~No.15 bounceIn~

少し弾みながら出現します。

bounceIn
No.11 bounceIn
InDown
No.12 bounceInDown
InLeft
No.13 bounceInLeft
InRight
No.14 bounceInRight
InUp
No.15 bounceInUp

No.16~No.20 bounceOut~

少し弾んでから姿を消します。

bounceOut
No.16 bounceOut
OutDown
No.17 bounceOutDown
OutLeft
No.18 bounceOutLeft
OutRight
No.19 bounceOutRight
OutUp
No.20 bounceOutUp

No.21~No.29 fadeIn~

少しずつ表示します。
Big がつくと移動距離が長くなります。

fadeIn
No.21 fadeIn
InDown
No.22 fadeInDown
InDown2
No.23 fadeInDownBig
InLeft
No.24 fadeInLeft
InLeft2
No.25 fadeInLeftBig
InRight
No.26 fadeInRight
InRight2
No.27 fadeInRightBig
fadeInUp
No.28 fadeInUp
fadeInUp2
No.29 fadeInUpBig

No.30~No.38 fadeOut~

少しずつ消えていきます。
Big がつくと移動距離が長くなります。

fadeOut
No.30 fadeOut
OutDown
No.31 fadeOutDown
OutDown2
No.32 fadeOutDownBig
OutLeft
No.33 fadeOutLeft
OutLeft2
No.34 fadeOutLeftBig
OutRight
No.35 fadeOutRight
OutRight2
No.36 fadeOutRightBig
fadeOutUp
No.37 fadeOutUp
fadeOutUp2
No.38 fadeOutUpBig

No.39~No.42 flip~

(指先などで)弾く、ひっくり返すような動きです。

flipInX
No.39 flipInX
flipInY
No.40 flipInY
flipOutX
No.41 flipOutX
flipOutY
No.42 flipOutY

No.43~No.44 lightSpeed~

光速

lightIn
No.43 lightSpeedIn
lightOut
No.44 lightSpeedOut

No.45~No.49 rotateIn~

回転しながら表示します。

rotateIn
No.45 rotateIn
rotateInDownLeft
No.46 rotateInDownLeft
rotateInDownRight
No.47 rotateInDownRight
rotateInUpLeft
No.48 rotateInUpLeft
rotateInUpRight
No.49 rotateInUpRight

No.50~No.54 rotateOut~

回転しながら非表示となります。

rotateOut
No.50 rotateOut
rotateOutDownLeft
No.51 rotateOutDownLeft
rotateOutDownRight
No.52 rotateOutDownRight
rotateOutUpLeft
No.53 rotateOutUpLeft
rotateOutUpRight
No.54 rotateOutUpRight

No.55 hinge

蝶番(ちょうつがい)

hinge
No.55 hinge

No.56 jackInTheBox

jackIn
No.56 jackInTheBox

No.57~No.58 roll~

転がるような動きです。

rollIn
No.57 rollIn
rollOut
No.58 rollOut

No.59~No.63 zoomIn~

画面奥から手前に向かって表示します。

zoomIn
No.59 zoomIn
zoomInDown
No.60 zoomInDown
zoomInLeft
No.61 zoomInLeft
InRight
No.62 zoomInRight
zoomInUp
No.63 zoomInUp

No.64~No.68 zoomOut~

画面奥に去っていきます。

zoomOut
No.64 zoomOut
zoomOutDown
No.65 zoomOutDown
zoomOutLeft
No.66 zoomOutLeft
OutRight
No.67 zoomOutRight
zoomOutUp
No.68 zoomOutUp

No.69~No.72 slideIn~

滑らかに表示します。

InDown
No.69 slideInDown
Inleft
No.70 slideInLeft
InRight
No.71 slideInRight
slideInUp
No.72 slideInUp

No.73~No.76 slideOut~

滑らかに非表示となります。

OutDown
No.73 slideOutDown
OutLeft
No.74 slideOutLeft
slideOutDownRight
No.75 slideOutDownRight
slideOutUp
No.76 slideOutUp

タイトルとURLをコピーしました