答案：通过引入 Animate.css 并结合 :hover 伪类，可为元素添加鼠标悬停动画。需先引入库文件，再为元素设置 animate__animated 基础类，并在 hover 时指定 animate__ 开头的动画名称（如 bounce、swing），同时可通过 CSS 控制动画节奏或用 JavaScript 实现一次性动画触发，确保动画流畅且不重复播放。
在 CSS 中，Animate.css 是一个流行的动画库，提供了大量预定义的 CSS 动画效果。如果你想让某个元素在用户鼠标悬停（:hover）时触发动画，可以将 Animate.css 与 :hover 结合使用。下面介绍几种实用的方法。
1. 基本用法：添加 hover 触发动画
首先引入 Animate.css 文件：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">然后为元素设置默认的 animate__animated 类，并在 :hover 时添加具体的动画类，比如 animate__bounce：
.my-element:hover {
animation-name: animate__bounce;
animation-duration: 1s;
}
同时确保 HTML 元素包含必要的基础类：
立即学习“前端免费学习笔记（深入）”；
<div class="my-element animate__animated">悬停我</div>这样，当鼠标悬停时就会播放弹跳动画。
2. 使用 @keyframes 直接调用动画
Animate.css 的动画本质是 @keyframes。你可以直接引用这些 keyframes 名称（通常以 animate__ 开头），避免每次写完整类名。
例如自定义 hover 效果：
.card:hover {
animation: animate__swing 1s ease;
}
对应的 HTML：
<div class="card animate__animated">卡片</div>注意：必须保留 animate__animated 类，否则 animation 属性不会生效。
3. 避免重复触发：控制动画节奏
如果快速多次悬停，动画可能反复播放，影响体验。可以通过 CSS 控制：
.my-element {animation-duration: 0.6s;
animation-fill-mode: both;
}
.my-element:hover {
animation-name: animate__pulse;
animation-iteration-count: infinite; /* 可选：持续动画 */
}
或者限制只播放一次，防止叠加：
.my-element {transition: none;
}
.my-element:hover {
animation: animate__fadeIn 0.5s;
}
4. JavaScript 辅助实现更精细控制（可选）
如果需要更复杂的逻辑，比如只播放一次动画，可以用 JS 添加和移除类：
document.querySelector('.btn').addEventListener('mouseenter', function () {if (!this.classList.contains('animate__animated')) {
this.classList.add('animate__animated', 'animate__tada');
}
});
这种方式适合“只动画一次”的场景。
基本上就这些。结合 Animate.css 和 :hover 能快速实现吸引人的交互效果，关键是正确引用动画名称并管理好动画状态。不复杂但容易忽略细节。
