Animate.cssが動かないと思ったらバージョン4になっていた件
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.」という表示が出る