使用Animate.css结合:hover伪类可实现鼠标悬停动画，需引入库文件并添加animate__animated基础类，通过CSS的animation属性调用如animate__bounce等动画，注意v4+版本前缀变化；为避免频繁触发导致的闪烁或中断，推荐设置animation-fill-mode: both或采用JavaScript控制类名添加与移除，以精确管理动画执行时机，简单效果可用纯CSS，复杂交互建议JS干预。
想让元素在鼠标悬停（hover）时触发动画，可以结合 Animate.css 和 CSS 的 :hover 伪类来实现。Animate.css 是一个预设动画的 CSS 库，使用时不需要写关键帧，直接调用类名即可。
1. 引入 Animate.css
在页面的 <head> 中引入 Animate.css：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">2. 基本 hover 触发动画
给目标元素添加 animate__animated 类（Animate.css 所需的基础类），然后通过 :hover 动态添加具体动画类，比如 animate__bounce。
示例 HTML：
立即学习“前端免费学习笔记（深入）”；
<div class="hover-animation">悬停我</div>CSS 写法：
.hover-animation {transition: transform 0.3s;
}
.hover-animation:hover {
animation: animate__bounce 1s;
}
注意：Animate.css 使用 animate__ 前缀（v4+ 版本），所以动画名称要加上前缀。
3. 避免重复触发与闪烁问题
直接使用 animation 在 hover 时可能造成频繁进出导致动画中断或抖动。推荐使用 JavaScript 控制类的添加，或用 CSS 结合 animation-fill-mode 来优化。
更稳定的纯 CSS 方法：
.hover-animation {opacity: 1;
}
.hover-animation:hover {
animation: animate__fadeInUp 0.6s forwards;
animation-fill-mode: both;
}
或者你也可以这样写，确保基础类一直存在：
.hover-animation {opacity: 1;
}
.hover-animation:hover {
animation: animate__swing 0.8s;
}
/ 预加载动画类 /
@keyframes animate__swing {
from { transform: rotate(0); }
to { transform: rotate(15deg); }
}
4. 推荐做法：用 JS 添加类（更灵活）
如果你希望动画只执行一次或避免重复播放，可以用 JavaScript 控制：
const element = document.querySelector('.js-hover');element.addEventListener('mouseenter', function() {
if (!this.classList.contains('animateanimated')) {
this.className = 'animateanimated animate__tada';
}
});
element.addEventListener('mouseleave', function() {
this.className = '';
});
这样能更好地控制动画生命周期，适合复杂交互。
基本上就这些。用 CSS + Animate.css 实现 hover 动画关键是正确引入库、使用 animation 属性调用动画，并处理好触发时机和重复问题。简单场景用纯 CSS，复杂需求建议配合 JS。
