animate-css

Animate.css スキル

HTML、React、または WordPress PHP コードに Animate.css（v4.1.1）のアニメーションを追加します。Claude は要素の種類とコンテキストに基づいてアニメーションを選択し、変更後のコードと、同梱ライブラリから抽出した必要な CSS のみを提供します。

同梱アセット： assets/animate.min.css — Animate.css v4.1.1 の完全なライブラリです。ユーザーの CSS ファイルにコピーする特定の @keyframes ブロックとクラス定義を抽出する必要がある場合は、このファイルを読み込んでください。ユーザーが明示的に希望しない限り、CDN のリンクを求めないでください。

---

アニメーション選択ガイド

要素の種類と目的に基づいてアニメーションを選択してください。派手なものより、控えめで目的に合ったものを優先してください。

要素の種類	推奨アニメーション
ヒーロー見出し / H1	fadeInDown、backInDown、slideInDown
本文の見出し H2–H4	fadeInLeft、fadeInUp、slideInLeft
段落 / 本文テキスト	fadeIn、fadeInUp
ボタン / CTA	pulse（ホバー時）、bounceIn（表示時）、tada（注意喚起）
カード / パネル	zoomIn、fadeInUp、backInUp
ナビゲーション / メニュー	slideInDown、fadeInDown
モーダル / ダイアログの表示	zoomIn、bounceIn、flipInX
モーダル / ダイアログの非表示	zoomOut、bounceOut、flipOutX
アラート / 通知	slideInRight、bounceInRight、shakeX（エラー時）
画像 / メディア	zoomIn、fadeIn、rollIn
リスト項目	animate__delay-* を段階的に適用した fadeInLeft
アイコン / バッジ	heartBeat、tada、rubberBand
フォームの成功状態	bounceIn、jackInTheBox
フォームのエラー状態	shakeX、headShake
ページ / セクションの表示	fadeIn、backInUp
サイドバー	slideInLeft、fadeInLeft
フッター	fadeInUp
読み込み中 / スピナー	pulse animate__infinite、flash animate__infinite
ツールチップ / ポップオーバー	fadeIn animate__faster
ドロップダウンメニュー	fadeInDown animate__faster

速度の修飾子

• デフォルト：1s
• animate__faster（500ms）— ツールチップ、ドロップダウン、小さな UI 要素
• animate__fast（800ms）— カード、モーダル
• animate__slow（2s）— ヒーローセクション、ドラマチックな表示
• animate__slower（3s）— 周囲の要素 / 背景要素

段階表示するリストの遅延

リスト項目を自然に段階表示するには、子要素に animate__delay-1s から animate__delay-5s を使用します。

スクロールトリガーのしきい値調整

threshold の値は、アニメーションが始まる前に要素がどの程度見えている必要があるかを制御します。要素のサイズに応じて選択してください。

要素のサイズ / 種類	しきい値	理由
小 — バッジ、アイコン、インラインラベル	0.5	意図的な動きに感じられるよう、大部分が見えている必要があります
中 — カード、統計ブロック、ボタン	0.15	デフォルト。要素が少しでも見えた時点で実行されます
大 — 高さのあるセクション、特徴紹介の行	0.08	早めに実行し、ユーザーがスクロールで通り過ぎる前にアニメーションが完了します
全高のパネル / ヒーロー形式のセクション	0.05	表示領域に入るとほぼすぐに実行されます

要素ごとに値を変更するには、要素（HTML/WP）に data-threshold を渡すか、React では useScrollAnimate(threshold) に値を渡します。

RTL 対応

RTL レイアウト（アラビア語、ウルドゥー語、ヘブライ語など）では、方向性のあるアニメーションを反転させる必要があります。ドキュメントまたは親コンテナーに dir="rtl" が設定されている場合は、次の置換を自動的に適用してください。

LTR アニメーション	RTL の対応アニメーション
fadeInLeft	fadeInRight
fadeInRight	fadeInLeft
slideInLeft	slideInRight
slideInRight	slideInLeft
backInLeft	backInRight
backInRight	backInLeft
bounceInLeft	bounceInRight
bounceInRight	bounceInLeft
lightSpeedInLeft	lightSpeedInRight
lightSpeedInRight	lightSpeedInLeft

垂直方向のアニメーション（fadeInUp、fadeInDown、zoomIn など）と注目を引くアニメーション（pulse、bounce、shakeX など）は方向に依存しないため、置換は不要です。

検出： <html>、<body>、または任意の祖先要素に dir="rtl" が設定されているか確認します。WordPress では is_rtl() を使用します。React では document.documentElement.dir === 'rtl' を確認するか、isRtl プロパティを渡します。必ず実行時に検出し、RTL の前提をハードコードしないでください。

---

出力形式

ステップ 1 — ユーザーのマークアップに注釈を付けて変更する

スクロール時とページ読み込み時： ファーストビューより下に表示される可能性のある要素（カード、統計情報、セクション、リスト）には、スクロール時に開始するアニメーションを使用します。ページ読み込み時のアニメーションは、ヒーロー見出しやナビゲーションなど、ファーストビュー内の要素にのみ使用します。判断に迷う場合は、スクロール時に開始するアニメーションを選んでください。こちらの方が常に安全です。

---

HTML（バニラ）

ファーストビュー内の要素には、クラスを直接追加します。

<h1 class="animate__animated animate__fadeInDown">Welcome</h1>

スクロール時に表示する要素には、最初は非表示にして、JS オブザーバーを追加します。トリガー属性として data-animate="fadeInUp" を追加し、このスクリプトをページごとに 1 回だけ含めます。

<div class="home-hero__stat scroll-animate" data-animate="fadeInUp" data-delay="0">...</div>
<div class="home-hero__stat scroll-animate" data-animate="fadeInUp" data-delay="150">...</div>
<div class="home-hero__stat scroll-animate" data-animate="fadeInUp" data-delay="300">...</div>

<script>
(function () {
  var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  var isRtl = document.documentElement.dir === 'rtl' || document.body.dir === 'rtl';
  var rtlFlip = {
    fadeInLeft: 'fadeInRight', fadeInRight: 'fadeInLeft',
    slideInLeft: 'slideInRight', slideInRight: 'slideInLeft',
    backInLeft: 'backInRight', backInRight: 'backInLeft',
    bounceInLeft: 'bounceInRight', bounceInRight: 'bounceInLeft',
    lightSpeedInLeft: 'lightSpeedInRight', lightSpeedInRight: 'lightSpeedInLeft'
  };

  document.querySelectorAll('.scroll-animate').forEach(function (el) {
    var threshold = parseFloat(el.dataset.threshold || 0.15);
    var observer = new IntersectionObserver(function (entries) {
      entries.forEach(function (entry) {
        if (!entry.isIntersecting) return;
        var anim = el.dataset.animate;
        if (isRtl && rtlFlip[anim]) anim = rtlFlip[anim];
        if (reducedMotion) {
          el.style.opacity = 1;
        } else {
          setTimeout(function () {
            el.classList.add('animate__animated', 'animate__' + anim, 'animate__fast');
          }, parseInt(el.dataset.delay || 0));
        }
        observer.unobserve(el);
      });
    }, { threshold: threshold });
    observer.observe(el);
  });
})();
</script>

オブザーバーが実行されるまで要素を非表示にするため、次の CSS を追加します。

.scroll-animate { opacity: 0; }
.scroll-animate.animate__animated { opacity: 1; }

---

React / JSX

ファーストビュー内の要素には、className でクラスを直接適用します。

<h1 className="animate__animated animate__fadeInDown">Welcome</h1>

スクロール時に表示する要素には、再利用可能な useScrollAnimate フックを使用します。

// hooks/useScrollAnimate.js
import { useEffect, useRef, useState } from 'react';

export function useScrollAnimate(threshold = 0.15) {
  const ref = useRef(null);
  const [visible, setVisible] = useState(false);
  const reducedMotion = typeof window !== 'undefined'
    && window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  useEffect(() => {
    if (reducedMotion) { setVisible(true); return; }
    const observer = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting) { setVisible(true); observer.disconnect(); } },
      { threshold }
    );
    if (ref.current) observer.observe(ref.current);
    return () => observer.disconnect();
  }, [threshold, reducedMotion]);

  return [ref, visible];
}

コンポーネントでの使用方法 — RTL 対応、インラインの animationDelay による段階的な表示：

import { useScrollAnimate } from './hooks/useScrollAnimate';

function HeroStats() {
  const [ref, visible] = useScrollAnimate(0.15);
  const isRtl = document.documentElement.dir === 'rtl';
  const enterAnim = isRtl ? 'animate__fadeInRight' : 'animate__fadeInLeft';
  const items = ['NEXT.JS', 'REACT 19', '< 10 MIN', '95/100'];

  return (
    <div ref={ref} className="home-hero__meta">
      {items.map((item, i) => (
        <div
          key={item}
          className={`home-hero__stat animate__animated animate__fast ${visible ? enterAnim : ''}`}
          style={{ opacity: visible ? 1 : 0, animationDelay: `${i * 150}ms` }}
        >
          {item}
        </div>
      ))}
    </div>
  );
}

---

WordPress PHP

ファーストビュー内の要素には、テンプレートでクラスを直接追加します。

<h1 class="animate__animated animate__fadeInDown">
  <?php esc_html_e( 'Welcome', 'your-theme' ); ?>
</h1>

スクロール時に表示する要素には data-animate 属性を使用し、functions.php からオブザーバースクリプトをエンキューします。

PHP テンプレート内：

<div class="home-hero__meta">
  <?php
  $stats = [
    ['value' => 'NEXT.JS',   'label' => 'App Router & ISR'],
    ['value' => 'REACT 19',  'label' => 'Server Components'],
    ['value' => '< 10 MIN',  'label' => 'Setup to Deploy'],
    ['value' => '95/100',    'label' => 'Google Speed Scores'],
  ];
  foreach ( $stats as $i => $stat ) : ?>
    <div
      class="home-hero__stat scroll-animate"
      data-animate="fadeInUp"
      data-delay="<?php echo esc_attr( $i * 150 ); ?>"
    >
      <span class="home-hero__stat-value"><?php echo esc_html( $stat['value'] ); ?></span>
      <span class="home-hero__stat-label"><?php echo esc_html( $stat['label'] ); ?></span>
    </div>
  <?php endforeach; ?>
</div>

functions.php 内：

function theme_enqueue_animations() {
  wp_enqueue_style(
    'animate-css',
    get_template_directory_uri() . '/assets/css/animations.css',
    [],
    '4.1.1'
  );
  wp_enqueue_script(
    'scroll-animate',
    get_template_directory_uri() . '/assets/js/scroll-animate.js',
    [],
    '1.0.0',
    true
  );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_animations' );

// Or for small extractions, inline the CSS to avoid an extra request:
function theme_inline_animation_css() {
  $css = '.scroll-animate{opacity:0}.scroll-animate.animate__animated{opacity:1}';
  wp_add_inline_style( 'animate-css', $css );
}
add_action( 'wp_enqueue_scripts', 'theme_inline_animation_css' );

assets/js/scroll-animate.js（このファイルをエンキューします）：

(function () {
  var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  var isRtl = document.documentElement.dir === 'rtl' || document.body.dir === 'rtl';
  var rtlFlip = {
    fadeInLeft: 'fadeInRight', fadeInRight: 'fadeInLeft',
    slideInLeft: 'slideInRight', slideInRight: 'slideInLeft',
    backInLeft: 'backInRight', backInRight: 'backInLeft',
    bounceInLeft: 'bounceInRight', bounceInRight: 'bounceInLeft',
    lightSpeedInLeft: 'lightSpeedInRight', lightSpeedInRight: 'lightSpeedInLeft'
  };

  document.querySelectorAll('.scroll-animate').forEach(function (el) {
    var threshold = parseFloat(el.dataset.threshold || 0.15);
    var observer = new IntersectionObserver(function (entries) {
      entries.forEach(function (entry) {
        if (!entry.isIntersecting) return;
        var anim = el.dataset.animate;
        if (isRtl && rtlFlip[anim]) anim = rtlFlip[anim];
        if (reducedMotion) {
          el.style.opacity = 1;
        } else {
          setTimeout(function () {
            el.classList.add('animate__animated', 'animate__' + anim, 'animate__fast');
          }, parseInt(el.dataset.delay || 0));
        }
        observer.unobserve(el);
      });
    }, { threshold: threshold });
    observer.observe(el);
  });
})();

WordPress では、RTL をサーバー側で検出してスクリプトに渡します。

function theme_enqueue_animations() {
  wp_enqueue_style( 'animate-css', get_template_directory_uri() . '/assets/css/animations.css', [], '4.1.1' );
  wp_enqueue_script( 'scroll-animate', get_template_directory_uri() . '/assets/js/scroll-animate.js', [], '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_animations' );

注：スクリプトは <html> の dir="rtl" を自動検出します。WordPress ではテーマヘッダーの language_attributes() によってこれが自動的に設定されるため、追加の PHP は不要です。

ステップ 2 — 必要な CSS のみを抽出して提供する

assets/animate.min.css を読み込み、次の内容を抽出します。

1. :root の CSS 変数ブロック（--animate-duration、--animate-delay、--animate-repeat に必要なため、必ず含めます）
2. .animate__animated の基本クラスブロック（必ず含めます）
3. @media (prefers-reduced-motion) ブロック（アクセシビリティのため、必ず含めます）
4. 実際に使用するアニメーションに対応する @-webkit-keyframes、@keyframes、.animate__* のクラスブロックのみ

ユーザーが CSS ファイルに貼り付けられるよう、コードブロックで提示します。ラベルを明確に付けます。

/* === Animate.css (extracted) — paste into your project CSS === */

:root { --animate-duration: 1s; --animate-delay: 1s; --animate-repeat: 1; }

.animate__animated { /* ... */ }

@media (prefers-reduced-motion: reduce) { /* ... */ }

/* Animations used: fadeInDown, fadeInUp, bounceIn */
@keyframes fadeInDown { /* ... */ }
.animate__fadeInDown { /* ... */ }
/* etc. */

ユーザーが Tailwind または CSS Modules を使用している場合は、代わりに npm install animate.css を実行して import 'animate.css' を記述する方法もあると伝えます。

ステップ 3 — セットアップ手順

次の内容を簡潔に必ず説明します。

• CSS を貼り付ける場所（または npm 経由でインポートする方法）
• HTML：CDN リンクを追加するか、抽出した CSS をスタイルシートに貼り付ける
• React：npm install animate.css を実行し、main.jsx / index.js で import 'animate.css' を記述するか、抽出した CSS をグローバルスタイルシートに貼り付ける
• WordPress：抽出した CSS をテーマの style.css に貼り付けるか、functions.php から別の animations.css ファイルをエンキューする
• prefers-reduced-motion のメディアクエリは CSS にすでに含まれているため、アクセシビリティのために追加の作業は不要

---

ベストプラクティス（自動的に適用）

• <html> や <body> はアニメーションさせないでください — 代わりに <main> またはコンテナの div で囲んでください
• animate__infinite は避けてください — ローダーやスピナーとして使う場合を除きます
• スライドまたはバウンスする要素の親に overflow: hidden を指定してください — 水平方向のスクロールバーを防止できます
• インライン要素はアニメーションできません — 対象の要素が display: inline かどうか確認し、ユーザーが inline-block または block にする必要がある場合はその旨を伝えてください
• アニメーションを重ねすぎないでください — 要素ごとに開始時のアニメーションは1つにし、注目を引くアニメーションは控えめに使ってください
• リスト項目は遅延クラスで順番に表示してください — すべてに同じ遅延を適用しないでください
• RTL では方向性のあるアニメーションを必ず反転してください — 左右のアニメーションを適用する前に、上記の RTL 置換表を確認してください
• CSS だけでなく、JS でも動きを減らす設定に対応してください — 同梱の CSS はクラスベースのアニメーションについて prefers-reduced-motion に対応していますが、スクロール監視スクリプトでもこの設定を確認し、ユーザーが動きを減らす設定を選んでいる場合はアニメーションをスキップして、要素をすぐに表示する必要があります

---

クイックリファレンス — 利用可能なすべてのアニメーション

注目を引くアニメーション： bounce、flash、pulse、rubberBand、shakeX、shakeY、headShake、swing、tada、wobble、jello、heartBeat

後方への登場／退出： backInDown、backInLeft、backInRight、backInUp / backOutDown、backOutLeft、backOutRight、backOutUp

バウンスしながらの登場／退出： bounceIn、bounceInDown、bounceInLeft、bounceInRight、bounceInUp / bounceOut、bounceOutDown、bounceOutLeft、bounceOutRight、bounceOutUp

フェードによる登場／退出： fadeIn、fadeInDown、fadeInDownBig、fadeInLeft、fadeInLeftBig、fadeInRight、fadeInRightBig、fadeInUp、fadeInUpBig、fadeInTopLeft、fadeInTopRight、fadeInBottomLeft、fadeInBottomRight / fadeOut も同じパターンです

フリップ： flip、flipInX、flipInY、flipOutX、flipOutY

ライトスピード： lightSpeedInRight、lightSpeedInLeft、lightSpeedOutRight、lightSpeedOutLeft

回転による登場／退出： rotateIn、rotateInDownLeft、rotateInDownRight、rotateInUpLeft、rotateInUpRight / rotateOut も同じパターンです

特殊効果： hinge、jackInTheBox、rollIn、rollOut

ズームによる登場／退出： zoomIn、zoomInDown、zoomInLeft、zoomInRight、zoomInUp / zoomOut、zoomOutDown、zoomOutLeft、zoomOutRight、zoomOutUp

スライドによる登場／退出： slideInDown、slideInLeft、slideInRight、slideInUp / slideOutDown、slideOutLeft、slideOutRight、slideOutUp

ユーティリティクラス： animate__delay-1s から animate__delay-5s、animate__slow、animate__slower、animate__fast、animate__faster、animate__repeat-1/2/3、animate__infinite