首页 > 文章 > 前端

CSSanimate.css与hover动画联动教程

时间：2025-10-02 21:27:51 473浏览收藏

想要为你的网站增添生动有趣的悬停(hover)动画效果吗？本文为你提供一份详尽的教程，教你如何巧妙地结合CSS动画库Animate.css和CSS的`:hover`伪类，轻松实现各种炫酷的鼠标悬停动画。首先，你需要引入Animate.css库，并为目标元素添加`animate__animated`基础类。然后，通过CSS的`animation`属性调用Animate.css中预设的动画类，如`animate__bounce`。为了避免动画频繁触发导致的闪烁或中断，建议使用`animation-fill-mode: both`或采用JavaScript控制类名的添加与移除，以精确管理动画的执行时机。简单动画效果可以直接使用纯CSS实现，而对于更复杂的交互，则建议配合JavaScript进行控制，从而获得更佳的用户体验。

使用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

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

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。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSSanimate.css与hover动画联动教程》文章吧，也可关注golang学习网公众号了解相关技术文章。