Animate.css 动画生效必须同时添加 animate__animated 与具体动画类（如 animate__fadeIn），v4+ 版本强制使用双下划线前缀，且默认禁用自动播放，需配合 Intersection Observer 等 JavaScript 手动触发。
Animate.css 的类名如何正确添加才能生效
要让元素产生动画效果，关键在于两个类名必须同时存在：一个是基础动画类 animate__animated，另一个是具体的动画效果类，例如 animate__fadeIn。这是因为所有核心的动画属性——包括动画持续时间、缓动函数等——都被定义在 animate__animated 这个基础类中。如果只添加 animate__fadeIn 而缺少基础类，元素将不会有任何动画反应。
开发者常见的两个误区是：遗漏基础类，或使用了旧版本的类名格式。请特别注意：从 Animate.css v4 版本开始，所有类名都强制要求使用双下划线前缀。
- 正确示例：
class="animate__animated animate__fadeIn" - 错误示例：
class="animate__fadeIn"（缺少基础类）、class="animated fadeIn"（旧版命名已失效） - 此外，v4及以上版本默认禁用了动画的自动播放，这意味着你需要使用 JavaScript 来控制动画的触发时机。
如何实现元素进入视口时才触发动画
Animate.css 本身不具备滚动监听功能。要实现“滚动到可视区域时才开始播放动画”这种常见的交互效果，必须借助 Intersection Observer API 结合 JavaScript 来动态切换元素的类名。
如果你直接将 animate__animated animate__fadeIn 写在 HTML 静态代码中，页面加载时动画就会立即执行，这显然不符合“入场动画”的预期效果。
立即学习“前端免费学习笔记（深入）”；
- 初始状态设置：为元素预先添加
animate__animated基础类，但暂时不添加具体的动画效果类。 - 动态触发机制：使用 Intersection Observer 监听目标元素，当它滚动进入浏览器视口时，再通过 JavaScript 动态为其添加如
animate__fadeIn这样的动画类名。 - 性能优化建议：可以复用同一个 Observer 实例来监听页面中的多个元素，避免为每个元素单独创建监听器，这对提升页面性能更为友好。
- 一个重要细节：即使元素初始状态是隐藏的（例如设置了
display: none或opacity: 0），Intersection Observer 通常也能正常工作，但前提是该元素在文档流中占据实际尺寸（如拥有高度或包含内容）。
Animate.css 常用入场动画类名效果与选择指南
不同的动画效果，在性能消耗和视觉表达上存在显著差异。选择时不应仅追求效果炫酷，还需综合考虑实际应用场景。
animate__fadeIn：淡入效果。性能开销最小，适合文字、卡片等绝大多数元素的平滑显现。animate__slideInUp：从下方滑入。涉及位置移动，使用时需注意父容器是否设置了overflow: hidden属性，以防内容被意外裁剪。animate__zoomIn：缩放进入。能有效利用 GPU 加速，渲染效率高。但需注意，在小尺寸元素上使用可能导致缩放边缘出现模糊。animate__bounceIn：弹跳进入。效果生动活泼，但 JavaScript 计算开销相对较大。若在长列表中批量触发此动画，可能引起页面卡顿，需谨慎使用。- 全局动画控制：所有动画默认持续时间为 1 秒，并使用
cubic-bezier(0.25, 0.46, 0.45, 0.94)缓动函数。你可以通过 CSS 自定义属性覆盖这些默认设置，例如调整--animate-duration（动画时长）和--animate-delay（动画延迟）变量。
为什么正确添加了类名动画仍不生效？关键排查清单
代码书写无误却看不到动画？问题通常出在环境配置或样式冲突上。按照以下清单进行排查，可以解决绝大多数问题：
- 样式表是否正确引入？：检查 HTML 文档中是否已正确引入 Animate.css 文件。确保 CDN 链接指向 v4 或更高版本，例如：
- 是否存在样式覆盖或冲突？：检查其他 CSS 规则是否强制覆盖了元素的
animation属性。例如，某条样式可能设置了animation: none !important;，这会直接导致 Animate.css 的动画声明失效。 - 是否在 Web Components 或 Shadow DOM 中使用？：Animate.css 的样式默认不会穿透到 Shadow Root 内部。你需要通过
adoptedStyleSheets手动将样式表注入，或者在全局作用域中引入。 - 是否涉及服务端渲染 (SSR)？：在 Next.js、Nuxt 等框架中，如果动画类名在服务端渲染阶段就已添加，那么浏览器在 hydration（注水）过程之前，动画可能已经执行完毕，导致用户看不到效果。正确的做法是将添加类名的操作延迟到客户端的
useEffect（React）或mounted生命周期钩子（Vue）中。
总而言之，CSS 动画的触发远比单纯添加类名复杂，它高度依赖于正确的触发时机和渲染上下文。尤其是在与现代前端框架、构建工具协同工作时，类名只是第一步，背后还有一系列隐性的环境条件需要满足和排查。
