多彩なアニメーションがクラス名を付与するだけで簡単に実装できる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のライブラリと組み合わせて使えば、スクロールしたらフワッと出てくるみたいなおしゃれなアニメーションも簡単に実装できそう。

実際にどのような動きをするのかは、サイトで確認できます。

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

神奈川生まれ沖縄育ちの88年生まれ。WEB制作3年目。
31歳まで舞台俳優を目指して活動していましたが、将来が不安になり未経験からWEB制作業界へ。
現在はWEB制作会社で働いています。たまに演劇経験を活かしてイベントスタッフも。

目次
閉じる