animate.css 动画生效需同时添加 animate__animated 和具体动画类（如 animate__fadeIn），v4+ 版本强制双下划线前缀，且默认禁用自动播放，须配合 Intersection Observer 等 JS 手动触发。
animate.css 的 class 名怎么加才生效
必须同时添加 animate__animated 和一个具体动画类（如 animate__fadeIn），缺一不可。只加 animate__fadeIn 不会动，因为基础动画规则全在 animate__animated 里定义。
常见错误是漏掉前者，或者写成旧版 class 名（如 animated fadeIn）—— v4+ 版本强制带双下划线前缀。
- 正确写法：
class="animate__animated animate__fadeIn" - 错误写法：
class="animate__fadeIn"（没基础类）、class="animated fadeIn"（旧命名） - v4+ 默认禁用自动播放，需手动触发或配合 JS 控制时机
如何让动画只在元素进入视口时触发
animate.css 本身不监听滚动，要实现“滚动到才动”，得靠 Intersection Observer 配合 JS 切换 class。
直接写 animate__animated animate__fadeIn 在 HTML 里，页面一加载就播了，不符合“入场”本意。
立即学习“前端免费学习笔记（深入）”；
- 初始状态：元素只带
animate__animated，不加具体动画类 - 监听进入视口后，用 JS 动态添加
animate__fadeIn等类名 - 可复用同一套 observer 实例，避免每个元素都新建
- 注意：如果元素初始不可见（
display: none或opacity: 0），observer 仍能正常检测，但需确保其有尺寸（比如设height或内容）
animate.css 常见入场动画类名对照表
不同动画对性能和语义影响差异挺大，别光看效果顺眼就乱用。
-
animate__fadeIn：淡入，轻量，适合文字/卡片 -
animate__slideInUp：从下往上滑入，有位移，注意父容器是否overflow: hidden -
animate__zoomIn：缩放入场，GPU 加速友好，但小尺寸元素可能糊 -
animate__bounceIn：带弹跳，JS 计算开销略高，慎用于列表项批量触发 - 所有动画默认持续 1s、缓动函数为
cubic-bezier(0.25, 0.46, 0.45, 0.94)，可通过 CSS 覆盖--animate-duration和--animate-delay变量调整
为什么加了 class 还不动？几个硬性检查点
不是代码写错，就是环境没配齐。优先查这四点：
- HTML 中是否已引入 animate.css 文件？CDN 地址必须是 v4+，例如：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"> - 元素是否被其他 CSS 强制覆盖了
animation属性？比如某处写了animation: none，会直接干掉 animate.css 的声明 - 是否在 Web Components 或 Shadow DOM 里使用？animate.css 默认不作用于 shadow root 内部，需手动将样式
adoptedStyleSheets注入或全局引入 - 是否在 SSR（如 Next.js / Nuxt）中服务端渲染时就加了动画 class？浏览器首次 hydrate 前动画已执行完毕，看起来像“没动”，应延迟到
useEffect或mounted后再加类
