17370845950

动画不生效主因是link未引入或class名错误；需确认CDN地址正确、状态码200、含rel="stylesheet"；v4+须同时加animate__animated和animate__xxx类，且需手动触发。

动画不生效，大概率是 link 标签没正确引入 或 class 名写错了。animate.css 的类名有严格命名规则，且新版（v4+）和旧版（v3）差异很大，容易踩坑。

检查 link 标签是否正确引入

确保你在 中用了官方推荐的 CDN 地址，并且没有被拦截或 404：

• v4+（推荐）：用 https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css
• v3（已停止维护）：用 https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css
• 确认浏览器开发者工具（F12 → Network）里该 CSS 文件状态码是 200，且内容可查看
• 不要漏掉 rel="stylesheet" 和 href 属性

确认 class 名完全匹配 animate.css 版本

v4+ 要求必须同时加 animate__animated 基础类 + 具体动画类（如 animate__bounce），缺一不可：

• ✅ 正确写法：class="animate__animated animate__bounce"
• ❌ 错误写法：class="bounce"、class="animated bounce"（这是 v3 写法）
• v4+ 所有动画类都带 animate__ 前缀，比如 animate__fadeInUp、animate__zoomIn
• 可查官网文档确认：https://www./link/cf26515238e08ce814a967ddc774bf5c

注意触发条件和默认行为

animate.css 只提供 CSS 动画定义，不会自动播放，需要手动触发：

• 页面加载时立即动：直接写在 HTML 里即可（前提是 DOM 已就绪）
• 滚动进入后动：需配合 JS 监听 scroll 或使用 IntersectionObserver
• 点击后动：用 JS 切换 class，例如 element.classList.add('animate__animated', 'animate__swing')
• 重复动画需加 animate__repeat 类，或用 CSS animation-iteration-count

排除常见干扰因素

以下情况会导致动画“看不见”或“不动”：

• CSS 优先级冲突：其他样式覆盖了 animation 或 visibility，用开发者工具检查 computed 样式
• 父元素设置了 overflow: hidden，裁掉了动画过程（如 bounce、slide 出界部分）
• 元素初始为 display: none 或 visibility: hidden，动画无法触发
• 使用了 prefers-reduced-motion: reduce 系统设置，animate.css v4+ 默认禁用动画（可加 data-aos="..." 或手动重写 @media (prefers-reduced-motion)