Animate.cssが動かないと思ったらバージョン4になっていた件

Animate.css看板

Animate.cssといえば、ホームページの要素に動きを出すときに持ってこいのライブラリでして、よくお世話になっているのですが…

今担当している案件でいつも通り使ったところ、動かない。微動だにしない。
(;^ω^)
30分ほどにらめっこして、いったん初心に返って公式サイトちゃんと読もう・・・と思ったら

バージョンが変わってるーーーー

いままで使っていたバージョンがバージョン3で、今年(2020年)からバージョン4に進化してました。

そして互換性ゼロになってました!うそやん!
どうりで動かないわけです。

bounceさせたい時の書き方の一例を書いておきます。

Animate.css バージョンごとの書き方

バージョン3(旧バージョン)の書き方】

<div class="animated bounce">ここに動かしたい要素</div>

バージョン4(新バージョン)の書き方】

<div class="animate__animated animate__bounce">ここに動かしたい要素</div>

こんな感じで、ガラッと変わっていました。

なので久しぶりにAnimate.cssを使われる方や、昔の紹介記事をコピペして動かねぇーとお困りの方は
一度公式サイトを確認されることをおすすめいたします。
(↓英語だけど頑張って読んでね)

Animate.css
https://animate.style/

よかったら、こちらの記事もどうぞ
FileZillaで「530 Sorry, the maximum number of clients (10) from your host are already connected.」という表示が出る

お問い合わせはこちら

「ホームページを作りたいけどよくわからない」
「作ったホームページのここを直したい」
「サーバーやドメインのことを教えてほしい」
「見積もりだけほしい」
「ネットショップを開設したい」
…などなど、ホームページにまつわるお悩みやご要望がありましたら、お気軽にお問い合わせください。
しつこい営業は一切いたしませんので、安心してご連絡ください。