如何用css animate.css与hover组合动画-css教程-PHP中文网

如何用css animate.css与hover组合动画

P粉602998670

发布： 2025-09-29 13:52:02

原创

550人浏览过

使用Animate.css结合:hover伪类可实现鼠标悬停动画，需引入库文件并添加animate__animated基础类，通过CSS的animation属性调用如animate__bounce等动画，注意v4+版本前缀变化；为避免频繁触发导致的闪烁或中断，推荐设置animation-fill-mode: both或采用JavaScript控制类名添加与移除，以精确管理动画执行时机，简单效果可用纯CSS，复杂交互建议JS干预。

如何用css animate.css与hover组合动画

想让元素在鼠标悬停（hover）时触发动画，可以结合 Animate.css 和 CSS 的 :hover 伪类来实现。Animate.css 是一个预设动画的 CSS 库，使用时不需要写关键帧，直接调用类名即可。

1. 引入 Animate.css

在页面的 <head> 中引入 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+ 版本），所以动画名称要加上前缀。

万兴爱画

万兴爱画AI绘画生成工具

查看详情

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组合动画的详细内容，更多请关注php中文网其它相关文章！