直接通过 cdn 引入最省事，但 v4+ 不兼容 ie，需兼容旧环境则锁定 v3.7.2；现代项目推荐 npm 安装并 @import；动画生效必须同时添加 animate__animated 和具体动画类；触发动画需 js 配合 intersection observer；失效常见原因为类缺失、css 冲突或 overflow 裁剪。
animate.css 怎么引入项目才不踩坑
直接通过 CDN 引入最省事，但要注意版本和加载时机。v4 之后默认只支持 CSS 自定义属性动画，旧版浏览器（如 IE）完全不兼容；v3 是最后一个支持 IE9+ 的稳定版，如果项目还需兼容老环境，得手动锁定 https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css。
现代项目推荐用 npm 安装：npm install animate.css，然后在入口 CSS 或 JS 中显式导入：
@import 'animate.css';
注意：不要在 里用 <link> 同时又在 JS 里 import，容易触发重复加载或样式覆盖。
如何给元素加动画才真正生效
animate.css 不是自动播放的——它只提供预设的 @keyframes 和配套类名，必须手动添加两个类：animate__animated（必需的基础类） + 具体动画类（如 animate__bounce）。
立即学习“前端免费学习笔记（深入）”；
常见错误是只写 animate__bounce，结果没效果。正确写法：
<div class="animate__animated animate__bounce">弹跳内容</div>
另外，默认动画只执行一次、无延迟、无速度控制。需要调整时，得额外加内联样式或自定义类：
-
animation-duration: 2s控制时长 -
animation-delay: 0.5s控制延迟 -
animation-iteration-count: infinite实现循环
怎么触发动画（比如滚动到视口才播放）
animate.css 本身不处理触发逻辑，得靠 JS 监听滚动或使用 Intersection Observer。简单场景可用 animate__animated animate__fadeInUp 配合 JS 切换类：
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate__animated', 'animate__fadeInUp');
observer.unobserve(entry.target);
}
});
});
document.querySelectorAll('.js-animate').forEach(el => observer.observe(el));
注意：别在 DOM 加载前就调用 observe()，否则 querySelectorAll 可能返回空 NodeList；也别忘了调用 unobserve()，否则会持续监听已播放过的元素，浪费性能。
为什么加了类还是没动画？几个高频原因
最常被忽略的是 CSS 层叠冲突。比如父容器设置了 overflow: hidden，而动画涉及位移（如 animate__slideInRight），元素可能被裁剪掉；或者全局重置了 animation 属性，覆盖了 animate.css 的声明。
调试建议按顺序检查：
- 浏览器开发者工具中确认元素确实有
animate__animated和目标动画类 - 看 computed 样式里
animation-name是否为对应@keyframes名（如animate__bounce） - 检查是否有其他 CSS 规则设置了
animation: none或all: unset - v4+ 版本要求必须带
animate__animated，漏掉就完全无效
animate.css 的动画本质是 CSS keyframes + 类控制，它不侵入 JS 逻辑，也不打包进构建流程——这意味着你得自己管好触发时机、性能开销和降级方案。尤其在移动端，大量 animate__pulse 或 animate__swing 可能引发重绘抖动，上线前务必真机测试。
