Animate.css バージョン4がリリース!v3と非互換なので注意!

Animate.css バージョン4 リリース

Animate.css バージョン4が2020年5月8日にリリースされた。

Animate.css

Animate.cssとはCSSを読み込んで特定のclassを追記するだけで要素にアニメーションをつけることができる便利なライブラリだ。

Animate.css v4はv3と互換性なし

Animate.cssはバージョン4からclass名が変更になったため、バージョン3と互換性がなくなった。

例えばバージョン3の場合はAnimate.cssを読み込んで、こちらの画像に「class="animated infinite shake"」を追加すると画像が無限に左右にシェイクするアニメーションとなる。
Animate.css バージョン4がリリース!3と非互換なので注意!

<!-- バージョン 3.5.1の場合 -->
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet">
<img class="animated infinite shake" src="https://iwb.jp/wp-content/uploads/2020/05/a.png">

しかしバージョン4からはclass名の頭にanimate__が付くようになったので「class="animate__animated animate__infinite animate__shakeX"」のようにanimate__を付けなければ動かなくなった。

さらにshakeは廃止でanimate__shakeXとanimate__shakeYの2つとなり、使用不可になっているので注意が必要だ。

<!-- バージョン 4.0.0の場合 -->
<link href="https://cdn.jsdelivr.net/npm/animate.css@4.0.0" rel="stylesheet">
<img class="animate__animated animate__infinite animate__shakeX" src="https://iwb.jp/wp-content/uploads/2020/05/a.png">

Vue.jsのドキュメントのカスタムトランジションクラスの説明などではバージョン3が使用されているため、今後バージョン4を使用して動作せず混乱する人が増えそうだ。