动画不生效主因是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），缺一不可：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- ✅ 正确写法：
class="animate__animated animate__bounce" - ❌ 错误写法：
class="bounce"、class="animated bounce"（这是 v3 写法） - v4+ 所有动画类都带
animate__前缀，比如animate__fadeInUp、animate__zoomIn - 可查官网文档确认：https://www.php.cn/link/cf26515238e08ce814a967ddc774bf5c
注意触发条件和默认行为
animate.css 只提供 CSS 动画定义，不会自动播放，需要手动触发：
立即学习“前端免费学习笔记（深入）”；
- 页面加载时立即动：直接写在 HTML 里即可（前提是 DOM 已就绪）
- 滚动进入后动：需配合 JS 监听 scroll 或使用 IntersectionObserver
- 点击后动：用 JS 切换 class，例如
element.classList.add('animate__animated', 'animate__swing') - 重复动画需加
animate__repeat类，或用 CSSanimation-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)
