需引入animate.css并添加animate__animated基础类才能启用动画，配合IntersectionObserver实现滚动入场，注意移动端兼容、IE11降级及无障碍支持。
用 animate.css 配合 Bootstrap 类快速加入场动画
bootstrap 本身不内置 css 动画（v5.x 已移除 animate 相关类），直接写 class="animate fadein" 会无效。必须引入第三方动画库，animate.css 是最轻量、兼容性好、语义清晰的选择。
常见错误是只引入 Bootstrap CSS，没加 animate.css，结果元素没反应，控制台也无报错，容易卡在“为什么 class 写对了却不动”。
- CDN 引入放在
中 Bootstrap CSS 之后：<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
- 入场动画需配合 JavaScript 控制「何时触发」：默认加载即播放，但多数场景需要「滚动到视口才播放」或「点击后播放」
-
animate__animated是必需的基础类（v4+ 版本强制前缀），漏掉它，animate__fadeIn等所有动画都无效 - 示例正确写法：
<div class="animate__animated animate__fadeIn">内容</div>
用 IntersectionObserver 实现滚动入场（避免一刷全动）
页面一打开就播所有动画，体验生硬，还可能因元素未渲染完成导致错位。真正可用的入场，得等元素进入视口再触发。
不用 jQuery 插件，原生 IntersectionObserver 足够轻且兼容到 Chrome 64+/Firefox 55+，比监听 scroll 高效得多。
- 给目标元素加一个统一标记类，比如
js-animate-on-enter，再配具体动画类：<div class="js-animate-on-enter animate__animated animate__slideInUp">卡片</div>
- 初始化观察器时设
threshold: 0.1（10% 进入即触发），避免用户刚看到边缘就停住不动 - 触发后立即移除
js-animate-on-enter，防止重复回调；不要用unobserve()，某些旧版 Safari 对它支持不稳定 - 移动端注意：iOS Safari 在页面缩放或键盘弹出时可能误触发，加个
if (!entry.isIntersecting) return;安全校验
fade 和 slide 类型动画的显示差异与取舍
动画类型选错，会掩盖内容结构或干扰阅读节奏。fadeIn 看似通用，但在深色背景或图文混排里容易让文字“闪一下”；slideInDown 在顶部导航栏下方元素上，又可能和页面滚动方向冲突。
-
fadeIn：适合纯文本块、卡片容器，但需确保背景色稳定；若父容器有透明度或 backdrop-filter，动画中会出现闪烁 -
slideInUp：适合列表项、商品卡片，符合用户从下往上的阅读预期；但若元素高度动态（如含折叠内容），需先设height: auto或用max-height过渡，否则会裁切 -
zoomIn：慎用于文字，小字号下易糊；更适合图标、头像、徽章类小元素 - 所有动画持续时间默认 1s，可通过内联样式覆盖：
style="animation-duration: 0.6s;"
，但别低于 0.3s，否则人眼难感知
IE11 兼容或 SSR 场景下的降级处理
IE11 不支持 @keyframes 的部分语法（如 transform: translateZ(0)），而 animate.css v4 默认启用硬件加速，会导致 IE 下动画卡死或不播。服务端渲染（如 Next.js/Nuxt）中，JS 还没执行时，动画类已存在，首屏会“闪一下”。
- IE11 方案：回退到
animate.cssv3.7.2（无前缀、无 transformZ），并加class="animated fadeIn"（不是animate__前缀） - SSR 降级：服务端不渲染动画类，只在客户端
useEffect或$(document).ready()后动态添加；或用data-animate属性标记，JS 初始化时再转成 class - 无障碍注意：动画可能引发眩晕，用
@media (prefers-reduced-motion: reduce)关闭，animate.cssv4 默认支持，但需确认没被 CSS 重置覆盖
