animate.cssのクラス(76種類)で設定することができるアニメーションのサンプルです。
animate.cssの設定の仕方についてはこちらの記事で紹介しています。
![](https://unitypull.com/wp-content/uploads/2020/01/a07b_i-min.png)
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…
![bounce](https://unitypull.com/wp-content/uploads/a39_13.png)
No.1 bounce / 跳ねる、バウンドする
![flash](https://unitypull.com/wp-content/uploads/a39_26.png)
No.2 flash / 閃光
![pulse](https://unitypull.com/wp-content/uploads/a39_5.png)
No.3 pulse / 脈動
![rubberBand](https://unitypull.com/wp-content/uploads/a39_14.png)
No.4 rubberBand / 輪ゴム
![shake](https://unitypull.com/wp-content/uploads/a39_19.png)
No.5 shake / 振る、揺らす
![headshake](https://unitypull.com/wp-content/uploads/a39_20.png)
No.6 headShake
![swing](https://unitypull.com/wp-content/uploads/a39_6.png)
No.7 swing / 揺れる、揺り動かす
![tada](https://unitypull.com/wp-content/uploads/a39_15.png)
No.8 tada
![wobble](https://unitypull.com/wp-content/uploads/a39_9.png)
No.9 wobble / ぐらつき、よろめき
![jello](https://unitypull.com/wp-content/uploads/a39_3.png)
No.10 jello
No.11~No.15 bounceIn~
少し弾みながら出現します。
![bounceIn](https://unitypull.com/wp-content/uploads/a39_23.png)
No.11 bounceIn
![InDown](https://unitypull.com/wp-content/uploads/a39_25.png)
No.12 bounceInDown
![InLeft](https://unitypull.com/wp-content/uploads/a39_11.png)
No.13 bounceInLeft
![InRight](https://unitypull.com/wp-content/uploads/a39_21.png)
No.14 bounceInRight
![InUp](https://unitypull.com/wp-content/uploads/a39_1.png)
No.15 bounceInUp
No.16~No.20 bounceOut~
少し弾んでから姿を消します。
![bounceOut](https://unitypull.com/wp-content/uploads/a39_24.png)
No.16 bounceOut
![OutDown](https://unitypull.com/wp-content/uploads/a39_25.png)
No.17 bounceOutDown
![OutLeft](https://unitypull.com/wp-content/uploads/a39_21.png)
No.18 bounceOutLeft
![OutRight](https://unitypull.com/wp-content/uploads/a39_11.png)
No.19 bounceOutRight
![OutUp](https://unitypull.com/wp-content/uploads/a39_1.png)
No.20 bounceOutUp
No.21~No.29 fadeIn~
少しずつ表示します。
Big がつくと移動距離が長くなります。
![fadeIn](https://unitypull.com/wp-content/uploads/a39_23.png)
No.21 fadeIn
![InDown](https://unitypull.com/wp-content/uploads/a39_8.png)
No.22 fadeInDown
![InDown2](https://unitypull.com/wp-content/uploads/a39_25.png)
No.23 fadeInDownBig
![InLeft](https://unitypull.com/wp-content/uploads/a39_11.png)
No.24 fadeInLeft
![InLeft2](https://unitypull.com/wp-content/uploads/a39_12.png)
No.25 fadeInLeftBig
![InRight](https://unitypull.com/wp-content/uploads/a39_21.png)
No.26 fadeInRight
![InRight2](https://unitypull.com/wp-content/uploads/a39_22.png)
No.27 fadeInRightBig
![fadeInUp](https://unitypull.com/wp-content/uploads/a39_1.png)
No.28 fadeInUp
![fadeInUp2](https://unitypull.com/wp-content/uploads/a39_2.png)
No.29 fadeInUpBig
No.30~No.38 fadeOut~
少しずつ消えていきます。
Big がつくと移動距離が長くなります。
![fadeOut](https://unitypull.com/wp-content/uploads/a39_24.png)
No.30 fadeOut
![OutDown](https://unitypull.com/wp-content/uploads/a39_8.png)
No.31 fadeOutDown
![OutDown2](https://unitypull.com/wp-content/uploads/a39_25.png)
No.32 fadeOutDownBig
![OutLeft](https://unitypull.com/wp-content/uploads/a39_21.png)
No.33 fadeOutLeft
![OutLeft2](https://unitypull.com/wp-content/uploads/a39_22.png)
No.34 fadeOutLeftBig
![OutRight](https://unitypull.com/wp-content/uploads/a39_11.png)
No.35 fadeOutRight
![OutRight2](https://unitypull.com/wp-content/uploads/a39_12.png)
No.36 fadeOutRightBig
![fadeOutUp](https://unitypull.com/wp-content/uploads/a39_1.png)
No.37 fadeOutUp
![fadeOutUp2](https://unitypull.com/wp-content/uploads/a39_2.png)
No.38 fadeOutUpBig
No.39~No.42 flip~
(指先などで)弾く、ひっくり返すような動きです。
![flipInX](https://unitypull.com/wp-content/uploads/a39_4.png)
No.39 flipInX
![flipInY](https://unitypull.com/wp-content/uploads/a39_3.png)
No.40 flipInY
![flipOutX](https://unitypull.com/wp-content/uploads/a39_23.png)
No.41 flipOutX
![flipOutY](https://unitypull.com/wp-content/uploads/a39_24.png)
No.42 flipOutY
No.43~No.44 lightSpeed~
光速
![lightIn](https://unitypull.com/wp-content/uploads/a39_5.png)
No.43 lightSpeedIn
![lightOut](https://unitypull.com/wp-content/uploads/a39_5.png)
No.44 lightSpeedOut
No.45~No.49 rotateIn~
回転しながら表示します。
![rotateIn](https://unitypull.com/wp-content/uploads/a39_24.png)
No.45 rotateIn
![rotateInDownLeft](https://unitypull.com/wp-content/uploads/a39_12.png)
No.46 rotateInDownLeft
![rotateInDownRight](https://unitypull.com/wp-content/uploads/a39_22.png)
No.47 rotateInDownRight
![rotateInUpLeft](https://unitypull.com/wp-content/uploads/a39_23.png)
No.48 rotateInUpLeft
![rotateInUpRight](https://unitypull.com/wp-content/uploads/a39_24.png)
No.49 rotateInUpRight
No.50~No.54 rotateOut~
回転しながら非表示となります。
![rotateOut](https://unitypull.com/wp-content/uploads/a39_10.png)
No.50 rotateOut
![rotateOutDownLeft](https://unitypull.com/wp-content/uploads/a39_19.png)
No.51 rotateOutDownLeft
![rotateOutDownRight](https://unitypull.com/wp-content/uploads/a39_6.png)
No.52 rotateOutDownRight
![rotateOutUpLeft](https://unitypull.com/wp-content/uploads/a39_9.png)
No.53 rotateOutUpLeft
![rotateOutUpRight](https://unitypull.com/wp-content/uploads/a39_10.png)
No.54 rotateOutUpRight
No.55 hinge
蝶番(ちょうつがい)
![hinge](https://unitypull.com/wp-content/uploads/a39_10.png)
No.55 hinge
No.56 jackInTheBox
![jackIn](https://unitypull.com/wp-content/uploads/a39_5.png)
No.56 jackInTheBox
No.57~No.58 roll~
転がるような動きです。
![rollIn](https://unitypull.com/wp-content/uploads/a39_12.png)
No.57 rollIn
![rollOut](https://unitypull.com/wp-content/uploads/a39_6.png)
No.58 rollOut
No.59~No.63 zoomIn~
画面奥から手前に向かって表示します。
![zoomIn](https://unitypull.com/wp-content/uploads/a39_4.png)
No.59 zoomIn
![zoomInDown](https://unitypull.com/wp-content/uploads/a39_7.png)
No.60 zoomInDown
![zoomInLeft](https://unitypull.com/wp-content/uploads/a39_16.png)
No.61 zoomInLeft
![InRight](https://unitypull.com/wp-content/uploads/a39_6.png)
No.62 zoomInRight
![zoomInUp](https://unitypull.com/wp-content/uploads/a39_2.png)
No.63 zoomInUp
No.64~No.68 zoomOut~
画面奥に去っていきます。
![zoomOut](https://unitypull.com/wp-content/uploads/a39_24.png)
No.64 zoomOut
![zoomOutDown](https://unitypull.com/wp-content/uploads/a39_8.png)
No.65 zoomOutDown
![zoomOutLeft](https://unitypull.com/wp-content/uploads/a39_6.png)
No.66 zoomOutLeft
![OutRight](https://unitypull.com/wp-content/uploads/a39_17.png)
No.67 zoomOutRight
![zoomOutUp](https://unitypull.com/wp-content/uploads/a39_2.png)
No.68 zoomOutUp
No.69~No.72 slideIn~
滑らかに表示します。
![InDown](https://unitypull.com/wp-content/uploads/a39_25.png)
No.69 slideInDown
![Inleft](https://unitypull.com/wp-content/uploads/a39_18.png)
No.70 slideInLeft
![InRight](https://unitypull.com/wp-content/uploads/a39_22.png)
No.71 slideInRight
![slideInUp](https://unitypull.com/wp-content/uploads/a39_1.png)
No.72 slideInUp
No.73~No.76 slideOut~
滑らかに非表示となります。
![OutDown](https://unitypull.com/wp-content/uploads/a39_25.png)
No.73 slideOutDown
![OutLeft](https://unitypull.com/wp-content/uploads/a39_21.png)
No.74 slideOutLeft
![slideOutDownRight](https://unitypull.com/wp-content/uploads/a39_16.png)
No.75 slideOutDownRight
![slideOutUp](https://unitypull.com/wp-content/uploads/a39_5.png)
No.76 slideOutUp
-