直接用 animate.css 的 hover 类无效，因其需 JS 动态增删 animate__animated 与动画类并强制重排来触发；纯 CSS 的 transform + transition 更轻量高效。
直接用 animate.css 的 hover 类是无效的——它本身不提供开箱即用的悬停触发机制，所有动画类（如 animate__bounce）默认只在元素加载时播放一次。
为什么直接加 animate__bounce + hover 不生效
animate.css 的设计原则是「手动控制」：动画类必须显式添加/移除才能触发。CSS 的 :hover 伪类无法自动切换 animate__animated 和具体动画类，更不会重播动画。
- 浏览器不会因为
:hover就重新计算或重置动画状态 - 即使你写
.card:hover .card-content { animation: bounce; }，也绕过了animate.css的类体系，失去其预设的 timing、delay、iteration 等封装 - 常见错误是只加
animate__animated animate__bounce，没处理类的动态增删，导致悬停无反应或只播一次
正确做法：用 JavaScript 监听 mouseenter/mouseleave
必须靠 JS 控制类的添加与清除，并利用 animate.css 提供的 animate__animated 基础类 + 具体动画类组合。关键点是每次悬停都「先清空再加新类」，避免重复叠加导致动画卡顿或失效。
document.querySelectorAll('.card').forEach(card => {
card.addEventListener('mouseenter', () => {
card.classList.remove('animate__animated', 'animate__bounce');
void card.offsetWidth; // 强制重排，确保类移除被识别
card.classList.add('animate__animated', 'animate__bounce');
});
card.addEventListener('mouseleave', () => {
card.classList.remove('animate__animated', 'animate__bounce');
});
});
更轻量替代：纯 CSS 实现 hover 动画（不依赖 animate.css）
如果只是基础缩放、位移、阴影变化，完全没必要引入整个 animate.css。原生 transition 更快、更可控，且支持多次触发。
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
立即学习“前端免费学习笔记（深入）”；
-
transform+transition组合性能远优于animation重绘 - 无需 JS，无事件监听开销
- 可精确控制缓动函数（
ease-in-out）、延迟（transition-delay）和持续时间
.card {
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
如果坚持用 animate.css，必须注意的三个坑
不是加了类就万事大吉。以下三点漏掉任意一个，动画大概率不播或只播一次：
- 元素必须有
animate__animated基础类（否则动画属性不生效） - 悬停时不能只加动画类（如
animate__swing），必须同时保留animate__animated - 动画类名必须完整匹配（v4 是
animate__bounce，v5 改为animate__bounceIn，版本混用会失效）
最常被忽略的是：动画类添加后，若元素 DOM 没变化，浏览器不会重触发。所以强制重排（void offsetWidth）或用 setTimeout 微任务延迟添加，是实际项目里最稳妥的做法。
