hover动画不触发主因是类名组合或触发时机错误；须同时添加animate__animated与具体动画类（如animate__bounce），推荐用JS动态增删类，并确保引入animate.css完整CDN、元素可交互且类名大小写正确。
hover 动画不触发，多数情况不是 animate.css 本身的问题，而是类名组合或触发时机没写对。
确保 hover 时正确添加动画类
animate.css 的动画类（如 animate__bounce）默认是“一次性执行”的，只加在元素上不会自动播放。必须配合 animate__animated 基础类，且需在 hover 状态下同时存在这两个类。
- ❌ 错误写法（hover 只加动画类，缺基础类）：
.box:hover { animation-name: bounce; }或.box:hover { class="animate__bounce" } - ✅ 正确写法（hover 时同时启用基础类 + 动画类）：
.box:hover { animation: animate__bounce 0.5s ease; }（不推荐，绕过 animate.css 规范）
更推荐用 class 切换：.box:hover { animation: none; }<br>.box:hover.animate__animated.animate__bounce { animation: animate__bounce 0.5s ease; }
推荐做法：用 JavaScript 在 hover 时动态添加类
CSS 的 :hover 无法直接“添加多个类”，所以最稳妥的方式是用 JS 控制类的增删，确保 animate__animated 和具体动画类（如 animate__swing）同时存在且仅在悬停时生效。
- HTML：
<div class="box">悬停我</div> - JS（简洁版）：
const box = document.querySelector('.box');<br>box.addEventListener('mouseenter', () => {<br> box.classList.add('animate__animated', 'animate__swing');<br>});<br>box.addEventListener('mouseleave', () => {<br> box.classList.remove('animate__animated', 'animate__swing');<br>}); - 注意：每次 hover 前确保移除旧动画类，避免重复叠加或卡顿
检查是否遗漏 animate.css 必要配置
新版 animate.css（v4+）要求显式引入基础样式，并启用 CSS 自定义属性支持。
立即学习“前端免费学习笔记（深入）”；
- 确认 HTML 中已引入完整 CDN（含 animate__animated 默认样式）：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"> - 确保元素有可触发 hover 的条件：比如非
display: none、有宽高、不是被父级pointer-events: none拦截 - 动画类名大小写敏感，必须是 animate__bounce（两个下划线），不是
animate_bounce或animate-bounce
避免动画重复触发导致失效
如果快速进出 hover 区域，动画可能因未结束就被中断，视觉上像“没触发”。可通过重置动画状态解决：
- 在 mouseleave 时先强制移除所有动画类，再加回基础类（可选）：
box.classList.replace('animate__animated', 'animate__animated');（触发重绘） - 或使用
animation-fill-mode: backwards;配合 JS 控制，但更简单的是加个防抖延时移除（如 100ms 后再 remove） - 也可给动画加
animation-duration和animation-timing-function显式声明，避免依赖默认值
