答案：通过引入Animate.css并结合JavaScript为按钮添加悬停动画，鼠标进入时动态添加如animate__bounce等动画类，动画结束移除类，实现流畅单次动画效果，推荐此法而非纯CSS无限循环。
要在CSS中为按钮添加 Animate.css 的悬停动画效果，你可以结合 Animate.css 预设的动画类和简单的 JavaScript 或纯 CSS 来实现鼠标悬停触发动画。
1. 引入 Animate.css
在页面的 <head> 中引入 Animate.css 的 CDN：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">2. 创建按钮并设置基础样式
写一个普通的按钮，并加上一些基本样式使其更美观：
<button class="hover-button">悬停我</button>可选：添加自定义CSS美化按钮：
立即学习“前端免费学习笔记（深入）”；
.hover-button {padding: 12px 24px;
font-size: 16px;
border: none;
border-radius: 6px;
background-color: #007bff;
color: white;
cursor: pointer;
transition: transform 0.3s ease;
}
3. 使用 JavaScript 实现悬停动画
Animate.css 动画默认是“一次性”播放的，直接用 :hover 不足以触发完整动画。推荐使用 JavaScript 在鼠标进入时动态添加动画类。
示例代码：
<script>
document.querySelector('.hover-button').addEventListener('mouseenter', function () {
this.classList.add('animate__animated', 'animate__bounce');
});
document.querySelector('.hover-button').addEventListener('animationend', function () {
this.classList.remove('animate__animated', 'animate__bounce');
});
</script>
这样，当鼠标悬停时按钮会“弹跳”一次，动画结束后自动清除类，避免重复触发。
4. 纯 CSS 方案（有限制）
你也可以尝试用纯 CSS 模拟简单动画，但注意 Animate.css 的部分动画不支持通过 :hover 直接持续触发。
例如使用 animate__pulse 配合无限循环（慎用）：
.hover-button:hover {animation: pulse 1s;
animation-iteration-count: infinite; /* 可去掉以只播放一次 */
}
但这可能影响性能或体验，推荐还是使用 JS 控制。
基本上就这些。使用 JavaScript 控制动画类的添加与移除，是最稳定、灵活的方式。常见用于悬停的 Animate.css 动画包括：animate__swing、animate__rubberBand、animate__shakeX 等，替换类名即可切换效果。
