使用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
在页面的 中引入 Animate.css：
2. 基本 hover 触发动画
给目标元素添加 animate__animated 类（Animate.css 所需的基础类），然后通过 :hover 动态添加具体动画类，比如 animate__bounce。
示例 HTML：
立即学习“前端免费学习笔记（深入）”；
CSS 写法：
.hover-animation {
transition: transform 0.3s;
}
.hover-animation:hover {
animation: animate__bounce 1s;
}
注意：Animate.css 使用 animate__ 前缀（v4+ 版本），所以动画名称要加上前缀。
Revid AI
AI短视频生成平台
96 查看详情 
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。
以上就是如何用css animate.css与hover组合动画的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1042826.html
微信扫一扫 
支付宝扫一扫 
