クラス2つ足すだけ。Animate.cssでUIに動きを与える最速の方法

はじめに

「ボタンをふわっと出したい」「エラーメッセージを揺らして目立たせたい」——そんなちょっとした動きのために、@keyframes を毎回手書きしていませんか？イージングの調整やベンダー対応を考え始めると、たかがアニメーションに30分溶けていた、なんてことも珍しくありません。

そこで登場するのが Animate.css です。HTML要素にクラスを2つ足すだけで、約100種類の洗練されたアニメーションが即座に使えます。2013年頃から存在する老舗ライブラリですが、今もメンテナンスが続き、GitHubで8万を超えるスターを集める定番中の定番です。

Animate.cssとは

Animate.cssは、クロスブラウザ対応のCSSアニメーションを集めたライブラリです。JavaScriptは一切不要で、あらかじめ定義されたクラスをHTMLに付与するだけでアニメーションが動きます。公式サイトのキャッチコピーは「As easy to use as an easy thing.（簡単なものと同じくらい簡単）」——その言葉どおりの手軽さが最大の魅力です。

主な特徴

約100種類のプリセット - bounce、fade、slide、zoom、flipなど12以上のカテゴリーに分類されたアニメーションが揃っています
CSSだけで完結 - JavaScript不要。クラスを付けるだけで動くため、静的サイトでもCMSでもすぐ使えます
ユーティリティクラス完備 - 遅延・速度・リピート回数をクラスの追加だけで制御できます
アクセシビリティ対応 - OSで「視差効果を減らす」を設定しているユーザーには、prefers-reduced-motion によって自動的にアニメーションが無効化されます

インストール

npmまたはyarnでインストールできます。

# npm
npm install animate.css --save

# yarn
yarn add animate.css

インストール後、エントリーファイルでインポートします。

import 'animate.css';

ビルド環境がない場合はCDNが手軽です。<head> に1行追加するだけで使えます。

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

基本的な使い方

使い方は驚くほどシンプルです。基本クラスの animate__animated と、アニメーション名のクラスを要素に付与するだけです。

<h1 class="animate__animated animate__bounce">ようこそ！</h1>

これだけで、見出しがバウンドしながら表示されます。animate__fadeIn、animate__zoomIn、animate__slideInLeft など、名前を差し替えれば動きが変わります。

速度・遅延・リピートの調整

ユーティリティクラスを重ねるだけで、細かい挙動を制御できます。

<!-- ゆっくり（2秒）フェードイン -->
<div class="animate__animated animate__fadeIn animate__slow">...</div>

<!-- 2秒待ってからズームイン -->
<div class="animate__animated animate__zoomIn animate__delay-2s">...</div>

<!-- 3回繰り返してバウンス -->
<div class="animate__animated animate__bounce animate__repeat-3">...</div>

CSSカスタムプロパティで自由に調整

バージョン4からはCSS変数（カスタムプロパティ）が導入され、プリセットにない値も自由に設定できます。

/* 全体のアニメーション時間を0.5秒に */
:root {
  --animate-duration: 0.5s;
}

/* 特定の要素だけ1.5秒に */
.my-element {
  --animate-duration: 1.5s;
}

実践的なユースケース

エラーメッセージを揺らして注意を引く

フォームのバリデーションエラーで、メッセージを横に揺らす定番の演出です。JavaScriptからクラスを動的に付与します。

const showError = (element) => {
  element.classList.add('animate__animated', 'animate__shakeX');

  // アニメーション終了後にクラスを外し、再実行できるようにする
  element.addEventListener(
    'animationend',
    () => {
      element.classList.remove('animate__animated', 'animate__shakeX');
    },
    { once: true }
  );
};

const emailInput = document.querySelector('#email-error');
showError(emailInput);

ポイントは animationend イベントでクラスを外すことです。これを忘れると、2回目以降にクラスを付けてもアニメーションが再生されません。

スクロールで要素をふわっと表示する

IntersectionObserver と組み合わせれば、スクロールして画面に入ったタイミングでアニメーションを発火できます。

<section data-animate="animate__fadeInUp">スクロールで表示される要素</section>

const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const animation = entry.target.dataset.animate;
        entry.target.classList.add('animate__animated', animation);
        observer.unobserve(entry.target); // 一度表示したら監視解除
      }
    });
  },
  { threshold: 0.2 }
);

document.querySelectorAll('[data-animate]').forEach((el) => {
  el.style.visibility = 'hidden'; // 初期状態は非表示
  observer.observe(el);
});

// アニメーション開始時に表示へ切り替え
document.addEventListener('animationstart', (e) => {
  e.target.style.visibility = 'visible';
});

ランディングページの「スクロールに合わせてコンテンツが現れる」演出が、外部プラグインなしで実装できます。

トースト通知の出し入れ

通知の表示と非表示を、入場・退場アニメーションのペアで表現します。

const toast = document.querySelector('.toast');

// 右からスライドイン
toast.classList.add('animate__animated', 'animate__slideInRight');

// 3秒後にフェードアウトして削除
setTimeout(() => {
  toast.classList.replace('animate__slideInRight', 'animate__fadeOutRight');
  toast.addEventListener('animationend', () => toast.remove(), { once: true });
}, 3000);

In 系と Out 系のアニメーションが対になって用意されているので、出し入れの演出に統一感を持たせやすいのもAnimate.cssの利点です。

使いすぎには注意

手軽なだけに、公式ドキュメントでも節度ある使い方が推奨されています。

意味のある動きに限定する - アニメーションはユーザーの注意を誘導する手段です。装飾のためだけに多用すると、かえって煩わしくなります
無限リピートは避ける - animate__infinite は視線を奪い続けるため、ローディング表示など明確な目的がある場合に限りましょう
大きな要素を動かさない - 画面の大部分を占める要素のアニメーションは、酔いや混乱の原因になります

なお、prefers-reduced-motion への対応はライブラリ側が自動で行ってくれるため、アクセシビリティの基本ラインは追加実装なしで確保できます。

まとめ

Animate.cssは、「クラスを2つ足すだけ」という圧倒的な導入コストの低さで、10年以上愛され続けているアニメーションライブラリです。

animate__animated + アニメーション名のクラスで即動く
速度・遅延・リピートもユーティリティクラスで制御できる
CSS変数でプリセット外の細かい調整も可能
IntersectionObserver や animationend と組み合わせれば実践的な演出も簡単

複雑なインタラクションにはGSAPやFramer Motionのような本格派が向きますが、「まず手早くUIに動きを付けたい」という場面ではAnimate.cssが今でも最短ルートです。公式サイト（animate.style）ではすべてのアニメーションをその場で試せるので、まずはお気に入りの動きを探してみてください。