Animate.css 样式不生效主因是 CDN 失效或类名错误；v4+ 必须用官方地址、带 animate__ 前缀、加 animate__animated 启用，禁用 preload；动画触发需手动控制，时长延迟优先用工具类或 CSS 变量。
用 <link> 引入 Animate.css 时样式不生效
常见现象是加了 animated bounce 类但元素完全不动，甚至控制台报 404。核心原因只有两个：CDN 链接失效或类名没写对。
实操建议：
- 必须用官方最新 CDN 地址，旧版 v3 的链接（如 cdnjs 上的）已停更，v4+ 才支持现代 CSS 变量和更严格的命名规范
- 引入后要确认浏览器开发者工具的
Network标签页里animate.min.css状态是 200，不是 404 或跨域拦截 - v4 起所有动画类名必须带
animate__前缀，比如animate__bounce，漏掉前缀等于白加 - 别在
<head>里用rel="preload"加载它——Animate.css 依赖 @keyframes 定义，preload 不保证执行顺序，容易导致动画注册失败
正确写法示例：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
对应 HTML：
立即学习“前端免费学习笔记（深入）”；
<div class="animate__animated animate__bounce">会弹跳</div>
Animate.css 动画触发时机不对：一进页面就播完
动画默认加载即播放，没有延迟、不可控，尤其在列表或滚动区域里非常突兀。
实操建议：
- 必须手动加
animate__animated类来启用动画引擎，只加animate__bounce不会动 - 想等元素进入视口再播？别依赖 Animate.css 自带 JS——它只提供 CSS 规则，不带 IntersectionObserver 逻辑，得自己写监听或用第三方库（比如 AOS）
- 需要点击触发？移除
animate__animated，用 JS 在事件里动态添加：el.classList.add('animate__animated', 'animate__fadeIn') - 注意：重复添加同一组动画类不会重播，得先
remove再add，或者用animationend事件清理
自定义动画持续时间或延迟时 class 不起作用
直接写 style="animation-duration: 2s;" 会被 Animate.css 里的 !important 覆盖，改不动。
实操建议：
- Animate.css v4+ 提供了预设的 duration 和 delay 工具类，比如
animate__delay-2s、animate__duration-3s，优先用这些 - 如果要精确到毫秒（比如 350ms），得覆盖 CSS 变量：
style="--animate-duration: 350ms;"，变量名必须严格匹配文档，错一个字母就无效 - 不要试图用
animation: none中断动画——它会清空整个 animation 属性，包括 Animate.css 注册的 keyframes，后续再加类也播不了 - 调试时打开开发者工具的
Animations面板，看实际生效的animation-name和duration值，比猜靠谱
打包工具（Webpack/Vite）里用 @import 引入 Animate.css 报错
错误信息通常是 Can't resolve 'animate.css' 或解析出一堆未定义变量，本质是模块解析路径和 CSS 预处理器冲突。
实操建议：
- 别在 SCSS/Sass 文件里
@import 'animate.css'——它不是 CSS 预处理器模块，是纯 CSS 文件，Webpack 默认不处理@import外部 URL - Vite 用户直接在
main.ts或main.js里import 'animate.css'即可，Vite 会自动识别并注入 - Webpack 用户需确保
css-loader和style-loader已启用，且node_modules/animate.css/animate.min.css路径拼写准确（注意大小写） - 如果用了 PostCSS，检查是否启用了
postcss-import，它会把@import当成本地路径处理，导致找不到文件
复杂点在于：Animate.css 的设计初衷就是开箱即用的 CDN 方案，一旦进构建流程，就得对齐它的变量机制、keyframes 注册时机和类名前缀规则——这些细节稍有偏差，动画就静音了。
