animate-css

Animate.css 技能

为 HTML、React 或 WordPress PHP 代码添加 Animate.css（v4.1.1）动画。Claude 会根据元素类型和上下文选择动画，然后提供修改后的代码，以及从捆绑库中提取的必要 CSS。

捆绑资源： assets/animate.min.css — 完整的 Animate.css v4.1.1 库。需要提取特定的 @keyframes 代码块和类定义并复制到用户的 CSS 文件中时，请读取此文件。除非用户明确表示更喜欢使用 CDN，否则不要让用户链接 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
列表项	fadeInLeft，搭配错开的 animate__delay-*
图标 / 徽章	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	进入视野时几乎立即触发

在元素上设置 data-threshold（HTML/WP），或向 useScrollAnimate(threshold)（React）传入一个值，即可针对单个元素进行覆盖。

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" 作为触发属性，然后每页仅包含一次此脚本：

<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 hook：

// 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 文件
• CSS 中已包含 prefers-reduced-motion 媒体查询 — 无需额外处理无障碍支持

---

最佳实践（自动应用）

• 切勿为 <html> 或 <body> 添加动画——改用 <main> 或容器 div 包裹内容
• 避免使用 animate__infinite，除非明确用于加载指示器或旋转指示器
• 在滑动或弹跳元素的父元素上使用 overflow: hidden，以防出现水平滚动条
• 内联元素无法添加动画——检查目标元素是否为 display: inline，并指出用户是否需要将其设为 inline-block 或 block
• 不要堆叠过多动画——每个元素只使用一个入场动画；谨慎使用吸引注意力的动画
• 为列表项添加延迟，使用延迟类；不要为所有元素应用相同的延迟
• 始终为 RTL 翻转方向性动画——应用任何左/右动画之前，先查看上面的 RTL 替换表
• 在 JS 中也要遵循减少动态效果偏好，而不只是 CSS——打包的 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