animate.cssのクラス(76種類)で設定することができるアニメーションのサンプルです。
animate.cssの設定の仕方についてはこちらの記事で紹介しています。
animate.cssでアニメーションをつける
このページでは、animate.css と ScrollTrigger.js を使用して、画面のスクロールに対応したアニメーションを実装する手順について紹介しています。
unitypull.com
2018.02.25
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系統)は、最初に表示された時だけ(１回のみ)動作するように設定しています。
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
－
