用途
Animate.css 技能用于向 HTML 元素、React/JSX 组件或 WordPress PHP 模板添加基于 Animate.css（v4.1.1）的 CSS 动画。它根据元素类型和上下文自动选择合适的动画，并交付修改后的代码以及从随附库中提取的所需 CSS。
主要能力
- 按元素类型选择动画：提供推荐指南，覆盖标题、段落、按钮、卡片、导航、模态框、通知、图片、列表项、图标、表单状态、页面/区块入口、侧边栏、页脚、加载指示器、工具提示、下拉菜单等。
- 速度与延迟修饰符：默认动画时长 1 秒；提供
animate__faster（500ms）、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属性或useScrollAnimate(threshold)参数覆盖。 - RTL 支持：检测
dir="rtl"（或 WordPress 的is_rtl()、React 的document.documentElement.dir），自动翻转方向性动画（如fadeInLeft↔fadeInRight、slideInLeft↔slideInRight、backInLeft↔backInRight、bounceInLeft↔bounceInRight、lightSpeedInLeft↔lightSpeedInRight）。垂直动画和注意力吸引动画无需翻转。 - 无障碍支持：CSS 内置
prefers-reduced-motion媒体查询；滚动观察脚本也会检测并跳过动画，直接显示元素。
使用方式
HTML（原生）
首屏元素直接添加类名：
<h1 class="animate__animated animate__fadeInDown">Welcome</h1>
滚动触发的元素使用 data-animate 属性并引入 IntersectionObserver 脚本（示例见原文），同时添加 CSS 保持元素在观察器触发前不可见：
.scroll-animate { opacity: 0; }
.scroll-animate.animate__animated { opacity: 1; }
React / JSX
首屏元素通过 className 直接应用类名。滚动触发使用可复用的 useScrollAnimate Hook（示例见原文），并在组件中通过内联 animationDelay 实现错峰，同时根据 RTL 状态选择进入动画。
WordPress PHP
首屏元素直接在模板中添加类名。滚动触发元素使用 data-animate 属性，并通过 functions.php 用 wp_enqueue_style 和 wp_enqueue_script 引入动画 CSS 和观察器脚本；也可用 wp_add_inline_style 内联少量 CSS。RTL 由 WordPress 通过 language_attributes() 自动设置 dir="rtl"，脚本会自动检测。
提取 CSS
步骤 2 要求读取 assets/animate.min.css，提取以下内容交付给用户，作为可粘贴的代码块：
:rootCSS 变量块（始终包含，用于--animate-duration、--animate-delay、--animate-repeat）.animate__animated基础类块（始终包含）@media (prefers-reduced-motion)块（始终包含，无障碍）- 仅包含实际使用的动画对应的
@-webkit-keyframes+@keyframes+.animate__*类块
若用户使用 Tailwind 或 CSS Modules，可提示通过 npm install animate.css 并 import 'animate.css' 引入。
安装与引入说明
- HTML：添加 CDN 链接或将提取的 CSS 粘贴到样式表。
- React：
npm install animate.css后在main.jsx/index.js中import 'animate.css'，或粘贴提取的 CSS 到全局样式表。 - WordPress：将提取的 CSS 粘贴到主题
style.css，或通过functions.php单独 enqueue 一个animations.css文件。
适用场景
- 为网页添加首屏入场动画或滚动触发的区块动画。
- 在 React 或 WordPress 项目中快速集成标准化 CSS 动画。
- 需要根据元素类型、尺寸和上下文自动选择动画并控制速度、延迟与触发时机。
- 需要支持 RTL 布局和无障碍（减少动态效果偏好）的动画实现。
限制
- 动画来源固定为 Animate.css v4.1.1，未提供其他动画库或自定义动画的支持。
- 未提及收费、价格或商业授权信息，暂未提供。
- 不保证在所有浏览器或所有元素上生效；内联元素（
display: inline）无法直接动画，需改为inline-block或block。 - 滚动观察脚本依赖 IntersectionObserver，部分旧版浏览器可能不支持（暂未提供兼容方案）。
- 应避免对
<html>或<body>应用动画，且避免滥用animate__infinite。