Animate.css v4+ 必须同时使用 animate__animated 和具体动画类（如 animate__fadeIn），缺一不可；CDN 或构建工具中需确保 animate.css 在 Bootstrap CSS 之后加载；滚动入场须用 IntersectionObserver 动态添加动画类；与 Bootstrap 组件混用时需监听其事件动态增删类并及时清理。
animate__animated 是强制前置类，漏掉就全失效
加了 animate__fadeIn 却没反应？大概率是只写了这个类，忘了加 animate__animated。Animate.css v4+ 要求所有动画类必须和 animate__animated 同时存在，否则浏览器直接忽略整个动画——控制台不报错，元素就静止不动。
必须这样写：<div class="animate__animated animate__fadeIn">内容</div>。顺序无关紧要，但两个类缺一不可。
常见错误：
- 只写
class="animate__fadeIn"（静态 HTML 里漏掉基础类） - 在构建工具中 import 了 animate.css，但没在组件里显式加
animate__animated - 误以为 Bootstrap 5 自带类似功能（它已彻底移除
fade类的动画逻辑，仅保留结构）
CDN 引入顺序必须在 bootstrap.min.css 之后
如果用 CDN，<link> 标签必须放在 bootstrap.min.css 的 后面，否则 animate.css 的 CSS 规则会被 Bootstrap 的重置样式覆盖，导致动画属性被丢弃。
立即学习“前端免费学习笔记（深入）”；
正确顺序示例：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
用 Webpack/Vite 时也一样：确保 import 'animate.css' 出现在 import 'bootstrap/dist/css/bootstrap.min.css' 之后，否则 CSS 加载顺序错乱，动画类可能被降权或忽略。
滚动入场必须用 IntersectionObserver 控制触发
直接给元素加 animate__fadeIn，页面一加载就全部播完，体验生硬，还容易因 DOM 渲染未完成导致跳帧或位置偏移。
真正可用的滚动入场逻辑得靠原生 IntersectionObserver：
- 初始化时只加
animate__animated，不加具体动画名（如animate__fadeIn） - 监听
isIntersecting === true，再动态element.classList.add('animate__fadeIn') - 触发后立刻
observer.unobserve(element)，避免重复执行 - 可设
rootMargin: '0px 0px -100px 0px'实现“上边缘离视口底边还有 100px 时就开始动画”
别用 scroll 事件监听做这事——性能差、易卡顿，且移动端兼容性不稳定。
和 Bootstrap 组件混用时必须监听事件动态增删类
Bootstrap 的 modal、carousel、collapse 都是 JS 控制显隐状态，不是靠类名增删驱动动画。直接在 HTML 里静态写死 animate__zoomIn，第二次打开就失效；加在 .modal-dialog 上又会和默认 transform: scale() 冲突，导致卡顿或不播放。
安全做法是监听对应事件：
-
show.bs.modal：DOM 已挂载、.show尚未添加，此时加animate__animated animate__slideInUp -
hidden.bs.modal：动画结束、.show已移除，此时remove动画类，防堆积 -
slid.bs.carousel：轮播切换完成，再给.carousel-item.active加动画类（不能用slide.bs.carousel，太早）
特别注意：.modal 根元素必须保留 fade 类，否则整个动画链断裂；.modal-backdrop 的 opacity 过渡也得单独同步处理，不然遮罩层会“啪”一下闪出来。
最常被忽略的点：动画类清理。哪怕用了 Animate.css，如果没在 hidden.bs.modal 或 animationend 里手动 remove，下次触发时浏览器可能跳过重播——因为类还在，CSS 认为“无需重新触发 animation”。
