css 想让卡片组件在悬停时有动画怎么办_使用 css animate.css 提供 hover 动画_技术教程

直接用 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 更快、更可控，且支持多次触发。

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);
}