应通过cdn引入animate.css：在head中添加link标签引用https://www.php.cn/link/b893c8c2eaa339c705d03677f0a184a0，元素需同时添加animate__animated和animate__动画名（如animate__bounce）两个类，且须配合animation-fill-mode: forwards保持结束状态。
怎么在HTML里正确引入Animate.css
直接通过 CDN 引入最稳妥，别下载后本地引用——除非你有离线部署或定制构建需求。官方推荐的 CDN 地址是 <a href="https://www.php.cn/link/b893c8c2eaa339c705d03677f0a184a0">https://www.php.cn/link/b893c8c2eaa339c705d03677f0a184a0</a>，注意版本号别写错，v4 和 v3 的类名不兼容。
- 用
<link>标签放在里，顺序无关紧要，但别放在自定义 CSS 后面（否则可能被覆盖） - 不需要引入 js 文件，Animate.css 纯 CSS 实现，
animate.min.css就够了 - 别漏掉
animation-duration或animation-fill-mode这类基础控制，否则动画可能一闪而过或不触发
<head> <link rel="stylesheet" href="https://www.php.cn/link/b893c8c2eaa339c705d03677f0a184a0"> </head>class 名怎么加才生效
必须同时包含两个类：animate<strong>animated</strong>（基础触发类）+ 具体动画名（如 animatebounce）。少一个都不动，不是只写 animate__bounce 就行。
- 常见错误：复制示例时漏掉
animate__animated，页面完全没反应 - 动画名里的双下划线
__是 v4 强制要求，v3 是单下划线，混用会失效 - 类名区分大小写，
animate<strong>fadeInUp</strong>不能写成animatefadeinup - 不支持 IE10 及更早版本，如果项目还要兼容，得 fallback 到 JS 动画库
比如让一个 div 进入时弹跳：
<div class="animate__animated animate__bounce">Hello</div>怎么控制动画触发时机（不是一加载就播）
Animate.css 本身不提供 JS 控制逻辑，它只定义 CSS 动画帧。想“滚动到才播放”或“点击才播放”，得自己监听事件并增删 class。
立即学习“前端免费学习笔记（深入）”；
- 最常用方式：用
IntersectionObserver监听元素进入视口，然后加animate__animated类（初始只留动画名，避免一进页面就播） - 别用
setTimeout模拟延迟，既不准又难维护 - 如果用 Vue/React，别在组件挂载后直接
el.classList.add()，注意 SSR 渲染时 dom 还不存在
简单手动触发示例（点击播放）：
<button onclick="this.nextElementSibling.classList.add('animate__animated', 'animate__swing')">摇一摇</button> <div class="animate__swing">我还没动</div>为什么动画播完就回弹？怎么让它停在结束状态
默认 CSS 动画播完会恢复原始样式，这是浏览器行为，不是 Animate.css 的 bug。要保持最后一帧，必须显式设置 animation-fill-mode: forwards。
- Animate.css v4 已在所有动画 keyframes 里写了
to状态，但没强制加forwards，所以得自己补 - 推荐写法：用额外 class 封装，避免每个地方都重复写内联 style
- 注意：加了
forwards后，元素会保留最终 transform、opacity 等值，可能影响后续交互（比如点击区域偏移）
安全写法：
<style> .animate__stay { animation-fill-mode: forwards; }</style> <p><div class="animate<strong>swing animate</strong>stay">播完就停在这</div>Animate.css 的坑基本集中在类名拼写、触发条件缺失和动画保持逻辑上，其他都是 CSS 动画本身的限制，跟库关系不大。