Animate.cssとは？CSS Animation Class Library

ページ内ナビ

概要

Animate.cssはfade、bounce、zoom、attention seeker等のanimationをCSS classとして提供するlibraryです。JavaScript APIは不要で、stylesheetを読み込みclassを追加するだけで利用できます。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：2026-10-05

主な特徴

animate__animatedとanimation classを組み合わせて使う

base classanimate__animatedにanimate__bounceやanimate__fadeIn等を追加し、HTML classだけでanimationを適用できます。

出典：[2][3]

多数のanimation presetを単一stylesheetから利用する

attention、back、bounce、fade、flip、lightSpeed、rotate、slide、zoom等のgroupを用意し、componentごとに選択できます。

出典：[3]

prefers-reduced-motionを尊重する

READMEはmotion sensitivity向けのprefers-reduced-motion supportを明記しており、OS側のreduce motion設定を反映できます。

出典：[2]

向いている用途

短時間でmicro-interactionやentry/exit animationを追加したいUIに向く

custom keyframesを一から書かず、prototypeやmarketing page、既存componentへ既製animationを追加したい場合に適します。

出典：[2]

導入前の確認

v4では旧v3系とclass namingが異なる

4.1.1 packageはanimate__ prefixを採用します。v3以前のsnippetをそのままコピーせず、v4 class名へ合わせてください。

出典：[3]

stable releaseは2020年の4.1.1で長期間更新されていない

repositoryはarchiveされていませんが、latest GitHub releaseは2020-09-07のv4.1.1です。新規採用では必要animationとmodern CSS環境での挙動を実際に確認してください。

出典：[4][1]

参考にした公式資料

[1]Animate.css repository(2026-10-05)
[2]Animate.css v4.1.1 README(2026-10-05)
[3]Animate.css v4.1.1 package metadata(2026-10-05)
[4]Animate.css v4.1.1 release(2026-10-05)
[5]Animate.css MIT license(2026-10-05)

編集部からの補足

Animate.css 4ではclass名にanimate__ prefixを使います。animate__animatedと個別animation classを組み合わせるのが基本です。prefers-reduced-motionにも対応しますが、animation自体がUX上適切かはcomponentごとに判断してください。

3ステップで試す

1
Animate.css 4.1.1を一時projectへ導入する
stable releaseを固定し、既存projectへ影響しない一時directoryで確認します。
demo=$(mktemp -d "${TMPDIR:-/tmp}/animate-css.XXXXXX") && cd "$demo" && npm init -y >/dev/null && npm install --save-exact animate.css@4.1.1
2
animation classを使う最小HTMLを作る
v4のbase classanimate__animatedと個別animation classanimate__bounceを組み合わせます。
printf "%s\n" '<!doctype html>' '<html><head><link rel="stylesheet" href="./node_modules/animate.css/animate.min.css"></head>' '<body><h1 class="animate__animated animate__bounce">Hello</h1></body></html>' > index.html
3
v4 classとreduced-motion ruleを確認する
v4 prefix付きclassとmotion sensitivity向けmedia queryがpackageへ含まれることを確認します。
grep -q ".animate__animated" node_modules/animate.css/animate.css && grep -q "prefers-reduced-motion" node_modules/animate.css/animate.css

公式READMEで確認

成長

成長の推移 · 直近30日

82,849 Stars

推移データを蓄積中です。

Built with

カテゴリとタグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る

GitHubで見る

GitHub Topics

animation
css
css-animations
stylesheets

Stars: 82,849
Forks: 15,877
Watchers: 2,210
Open Issues: 80
所有者種別: Organization
主要言語: CSS
ライセンス: MIT
リポジトリ最終更新: 2024/07/29