animate.css 动画需同时添加 animate__animated 和 animate__bounce 类，v4+ 版本不兼容 v3 类名，且必须确保 dom 渲染完成、元素可见、css 正确引入。
Animate.css 本身不执行 JavaScript，只提供预设 CSS 类名；直接加类就能动，但必须等 DOM 渲染完成后再添加动画类，否则可能不触发。
CDN 引入后为什么加了 animate__bounce 没反应？
最常见原因是没引入配套的 base 样式或类名拼写错误。Animate.css v4+ 要求所有动画类必须搭配 animate__animated 基础类，且需用 animate__ 前缀。
- 必须同时添加两个类：
animate__animated animate__bounce（缺一不可） - CDN 链接要选对版本，v4 推荐用：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
- v3 的类名是
animated bounce，和 v4 不兼容，混用会失效 - 如果元素初始为
display: none或未渲染进 DOM，加类也无效——得先 show 再加动画类
用 npm 安装后怎么在 React/Vue 项目里正确使用？
npm 安装的是纯 CSS 文件，不是组件，不能 import 组件调用，而是要确保 CSS 被加载、且类名书写规范。
- 安装命令：
npm install animate.css
- 在入口 JS（如
main.js或index.js）中显式导入：import 'animate.css';
- React 中动态加类建议用
useState控制类名切换，避免直接操作 DOM：const [isAnimated, setIsAnimated] = useState(false);<br>...<br><div classname="{`animate__animated" :>Hello</div> - Vue 中可用
:class绑定，但注意：animate__animated必须始终存在，否则动画不会重播
如何让动画只播一次、不循环，且播完保持最终状态？
默认动画播放完会回退到初始样式，想“停在最后一帧”必须加 animate__animated + animate__duration + animate__delay 等辅助类，但关键还是 CSS 的 animation-fill-mode 行为——Animate.css 已内置为 both，所以只要类名正确，结束态就会保留。
- 确保没误加
animate__infinite类（它会让动画循环） - 不要手动写
animation-iteration-count: infinite覆盖掉原样式 - 若需自定义时长，用
animate__duration-1s（支持1s~10s），别改 CSS 的animation-duration，容易破坏 fill-mode - JS 触发动画后，如需监听结束，监听
animationend事件，注意事件名含前缀：webkitAnimationEnd（Safari）和animationend（其他）都得处理
真正容易被忽略的是：Animate.css 的动画依赖 transform 和 opacity，如果父容器有 will-change: transform 或开启了硬件加速，偶尔会干扰重绘节奏；遇到偶发不触发，试试临时移除父级的 will-change 或加 force reflow（例如读取 offsetHeight 后再加类）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
