因为animate__animated是强制前置类，漏掉它所有animate.css动画（含animate__fadeIn）都会静默失效；必须同时添加animate__animated和animate__fadeIn两个类，且引入顺序须在bootstrap.min.css之后。
为什么加了 animate__fadeIn 却没反应？
因为 animate__animated 是强制前置类，漏掉它，所有 animate.css 动画（包括 animate__fadeIn）都会静默失效。Bootstrap 5.x 完全不内置动画类，只提供基础结构和 JS 行为，animate.css 必须单独引入，且顺序必须在 bootstrap.min.css 之后。
常见错误是只写 class="animate__fadeIn"，或误以为 Bootstrap 自带 fadein 类（v4 以前有类似命名，但 v5 已彻底移除）。控制台不会报错，元素就卡在初始状态不动——这是最典型的“没反应”原因。
- CDN 引入必须放在
<head>中 Bootstrap CSS 之后：<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
- HTML 元素必须同时含两个类：
animate__animated+ 动画名，例如：<div class="animate__animated animate__fadeIn">内容</div> - 如果用构建工具（如 Webpack/Vite），确保
animate.css被正确 import 或 require，而非仅声明依赖
如何让元素「滚动到视口才淡入」，而不是一刷就动？
直接加 animate__fadeIn 会导致页面加载瞬间全部触发，体验生硬，还可能因 DOM 渲染未完成导致位置错位或动画跳帧。真正可用的入场逻辑，得靠 IntersectionObserver 控制触发时机。
它比监听 scroll 事件轻量得多，原生支持，兼容 Chrome 64+/Firefox 55+，且不会造成滚动卡顿。
立即学习“前端免费学习笔记（深入）”；
- 初始化时先给元素加上
animate__animated，但**不加**动画名（如animate__fadeIn），避免提前播放 - 用
IntersectionObserver监听元素进入视口（isIntersecting === true），再动态添加动画类：const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('animate__fadeIn'); observer.unobserve(entry.target); // 触发后停止监听，防重复 - 可设
rootMargin提前触发，比如rootMargin: '0px 0px -100px 0px'让元素上边缘离视口底部还有 100px 时就开始动画
animate__fadeIn 和 Bootstrap 自带 fade 类能混用吗？
不能混用，二者机制冲突。fade 是 Bootstrap 的过渡类，依赖 opacity + transition + JS 切换 show 类；而 animate__fadeIn 是 keyframes 动画，靠 @keyframes 驱动，一旦启动就不可中断（除非用 JS 手动移除类并重置）。
若同时加 fade show 和 animate__animated animate__fadeIn，会出现动画抢夺、opacity 值打架、首次加载空白等问题。
- 选一个体系坚持用：需要简单可控、可 JS 中断的淡入，用 Bootstrap 原生
fade+show；需要丰富入场动效（弹跳、滑入、缩放等），用animate.css - Bootstrap 的
fade类默认无transition声明，需自行补上：.fade { transition: opacity 0.15s ease-in-out; } -
animate__fadeIn默认持续 1s，想调快/慢，得覆盖 CSS：.animate__fadeIn { --animate-duration: 0.6s; }
移动端和 IE11 下 animate__fadeIn 不动怎么办？
animate.css v4+ 默认启用 CSS 自定义属性（--animate-duration 等），IE11 不支持，部分安卓 WebView（尤其旧版）对 transform + opacity 复合动画渲染不稳定，会导致淡入卡住或跳变。
这不是代码写错，而是运行环境限制。
- IE11 用户必须降级到
animate.cssv3.7.2（无 CSS 变量，兼容性最佳），CDN 地址：https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css - 移动端建议加
will-change: opacity提升渲染优先级，但别滥用，只加在实际要动画的元素上 - 避免在
position: fixed或transform父容器内使用animate__fadeIn，某些 Android 浏览器会因层叠上下文丢失导致 opacity 不生效 - 无障碍方面：动画触发后，记得用
prefers-reduced-motion媒体查询兜底，否则可能引发眩晕问题：@media (prefers-reduced-motion: reduce) { .animate__animated { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }}
animate__animated animate__fadeIn 缺一不可），触发时机必须由 IntersectionObserver 控制——其余都是围绕这两点做兼容和微调。 
