引入Animate.css库后，通过HTML创建卡片并用CSS自定义:hover动画，或结合JavaScript动态添加animate__animated和animate__bounce类，实现鼠标悬停时的自然浮动效果，推荐使用纯CSS的keyframes方案以提升性能。
想让卡片在鼠标悬停时产生自然的浮动效果，Animate.css 提供了简单又高效的方式。不需要从零写动画关键帧，只需引入库并添加对应的类名，配合 :hover 即可实现流畅的交互动画。
1. 引入 Animate.css 库
在页面的 <head> 中通过 CDN 引入 Animate.css：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>这一步是基础，确保后续动画类名能正常生效。
2. 创建基础卡片结构
使用简单的 HTML 结构定义一个卡片：
立即学习“前端免费学习笔记（深入）”；
<div class="card"><h3>我的浮动卡片</h3>
<p>将鼠标悬停上来查看动画效果。</p>
</div>
再为其添加一些基本样式，提升视觉表现：
.card {width: 280px;
padding: 20px;
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
text-align: center;
margin: 40px auto;
}
3. 使用 Animate.css 类结合 :hover 触发浮动动画
Animate.css 中推荐用于“浮动”或“轻盈弹跳”感的动画类包括：animate__bounce、animate__float（需自定义）或 animate__pulse。由于 Animate.css 没有默认的 float 动画，我们可以用 animate__bounceIn 或更柔和的 animate__pulse 来模拟浮动感。
通过 CSS 的 :hover 动态添加 animate.css 的类名来触发动画：
.card:hover {animation: floatAnimation 1s ease-in-out;
}
@keyframes floatAnimation {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
或者，如果你希望直接使用 Animate.css 内置类，可以结合 JavaScript 动态添加：
<script>document.querySelector('.card').addEventListener('mouseenter', function() {
this.classList.add('animate__animated', 'animate__bounce');
});
document.querySelector('.card').addEventListener('animationend', function() {
this.classList.remove('animate__animated', 'animate__bounce');
});
</script>
这样在每次鼠标进入时播放一次弹跳动画，离开后重置，避免重复触发。
4. 推荐：纯 CSS 实现轻量浮动（无需 JS）
更简洁的做法是自定义一个类似“浮动”的 keyframe 动画，并利用 Animate.css 的命名风格保持一致性：
.card:hover {animation: float 0.6s ease-in-out;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-8px); }
100% { transform: translateY(0px); }
}
这种方案不依赖 JavaScript，性能更好，适合大多数静态卡片悬停场景。
基本上就这些。Animate.css 虽然不能直接用单一类名实现 hover 浮动，但结合 CSS 动画或少量 JS 就能轻松达成理想效果。关键是理解其动画触发机制——添加 animate__animated 和具体动画类即可播放一次。灵活组合，就能做出自然的交互反馈。
