BLOG

Animate cssが進化していた！

2020.06.24 | HTML/CSS/PHP

フェードインやスライドインなどのちょっとしたアニメーションをつけるのに便利なのが「wow.js」と「animate.css」なんですが、この間仕事で、こいつを使う機会があって触ってたんですがいっこうに動かない状態になっていたのでなんでだと思ったら、animate.cssのバージョンが上がってたのが原因でした。
調べてみると、まぁなんと、animate.css単体で簡単なアニメーションができるって感じじゃないですか。。。
wow.jsがなくてもよくなったっていうスゴいことですよね。
では早速使い方を調べてみました。

animate.cssを読み込む

なにはさておきまずは、animate.cssを読み込まないと始まりません。
手なわけで、早速インストール！

npm install animate.css --save
or
yarn add animate.css

こんな感じでインストールしちゃうかCDNを使って読み込むかです。

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"
  />
</head>

まぁ、こんな感じ！

使い方

使い方はwow.jsで使ってたのとさほど変わりません。
基本的にはクラスを追加するだけです。

<h1 class="animate__animated animate__bounce">An animated element</h1>

これでbounceの動きができるようになります。
wow.jsのときは

<h1 class="wow bounce">An animated element</h1>

って感じだったので、少しちがいますけど、ほぼほぼ一緒という感じですかね？え？違う？いや違わないよ。。。。

あとは時間の指定ですね。
表示してからの時間や、アニメーションをしている時間の設定ですが、こちらもざっくりと指定する場合はクラスだけでOKだそうな。

<div class="animate__animated animate__bounce animate__delay-2s">Example</div>

animate__delay-2s   2s
animate__delay-3s   3s
animate__delay-4s   4s
animate__delay-5s   5s

表示してから、動き出すまでの時間の指定はこんな感じ、もっと細かいｍｓ（ミリ秒）の指定はクラスでは無理そう

<div class="animate__animated animate__bounce animate__faster">Example</div>

animate__slow   2s
animate__slower 3s
animate__fast   800ms
animate__faster 500ms

アニメーションをしている時間の指定はこんな感じです。
こちらも細かな設定をする場合はクラスでは難しいです。

リピートは

<div class="animate__animated animate__bounce animate__repeat-2">Example</div>

animate__repeat-1   1
animate__repeat-2   2
animate__repeat-3   3

まぁ、これはそんなに

時間指定を細く設定する

では細かい設定をする場合はどうするのかといういと
直接CSSで指定するって感じだそうな

/* All delay classes will take 2x longer to start */
:root {
  --animate-delay: 2s;
}

/* All delay classes will take half the time to start */
:root {
  --animate-delay: 0.5s;
}

ディレイの設定--animate-delayを使えばいいとのことです。
が--animation-delayの間違いなんかな？

/* All animations will take twice as long to finish */
:root {
  --animate-duration: 2s;
}

/* Only this element will take half the time to finish */
.my-element {
  --animate-duration: 0.5s;
}

アニメーション時間の設定も--animate-durationを使えばいいとのことです。
が--animation-durationの間違いなんかな？

　まとめ

よくよく調べると昔から単体でできてたそうですね^^;
じゃぁ、　wowと組み合わせてやってたんだろう。。。という疑問が感じられますが、
CSS3が対応できてなかった時代にJSで動かしてたんかなっていう勝手な想像をはたらかせてみましたがどうなんでしょうか。
まぁ、何にせよJSを使わないでCSSで動きを実装できるというのは、動作を軽くする上で重要なことではないかなと思います。
皆様も試してみてはいかがでしょうか。