多彩なアニメーションがクラス名を付与するだけで簡単に実装できるanimate.css

URLをコピーしました！

今回はサイト制作でアニメーションを実装する際に、簡単なCSSアニメーションならすぐ実装できるCSSのライブラリがあったので共有します。

Animate.cssというライブラリですが、クラス名を付与するだけで驚くほど簡単にアニメーションを実装できました。

恥ずかしながら、WEB制作を3年ほどやってきたのに知らなかったです（笑）

多少凝ったアニメーションなら自作してもいいと思いますが、「揺れる・バウンドする・スイングする」などのシンプルなアニメーションならこちらを使用した方が手っ取り早いかもしれません！

アニメーションの種類も30以上あるので、おすすめです。

使い方

CDNで利用する場合、以下のリンクをheadタグ内に記入します。

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

npm・yarnでの導入方法はこちら。

あとは、実装したいアニメーションのクラスをつけるだけ。

See the Pen Untitled by yozacchi (@temitarz) on CodePen.

<h1 class="animate__animated animate__bounce animate__infinite">文字がバウンドします。</h1>
<!-- 
.animate__animated ->アニメーションを行う要素に付与するデフォルトのクラス
.animate__bounce   ->アニメーションの種類
.animate__infinite ->アニメーションの反復回数
 -->

アニメーションの種類だけでなくアニメーションのスピード、遅延時間、反復回数などもユーティリティクラスで対応可能です。

以下のサイトでも紹介されていますが、要素が画面内に入ったら動くjsのライブラリと組み合わせて使えば、スクロールしたらフワッと出てくるみたいなおしゃれなアニメーションも簡単に実装できそう。

動くWebデザインアイデア帳