在css中Animate.css与hover结合使用

技术教程
2025-10-24 18:40:02

答案：通过引入 Animate.css 并结合 :hover 伪类，可为元素添加鼠标悬停动画。需先引入库文件，再为元素设置 animate__animated 基础类，并在 hover 时指定 animate__ 开头的动画名称（如 bounce、swing），同时可通过 CSS 控制动画节奏或用 J*aScript 实现一次性动画触发，确保动画流畅且不重复播放。

在css中animate.css与hover结合使用

在 CSS 中，Animate.css 是一个流行的动画库，提供了大量预定义的 CSS 动画效果。如果你想让某个元素在用户鼠标悬停（:hover）时触发动画，可以将 Animate.css 与 :hover 结合使用。下面介绍几种实用的方法。

1. 基本用法：添加 hover 触发动画

首先引入 Animate.css 文件：

然后为元素设置默认的 animate__animated 类，并在 :hover 时添加具体的动画类，比如 animate__bounce：

.my-element:hover {
animation-name: animate__bounce;
animation-duration: 1s;
}

同时确保 HTML 元素包含必要的基础类：

悬停我

这样，当鼠标悬停时就会播放弹跳动画。

2. 使用 @keyframes 直接调用动画

Animate.css 的动画本质是 @keyframes。你可以直接引用这些 keyframes 名称（通常以 animate__ 开头），避免每次写完整类名。

例如自定义 hover 效果：

.card:hover {
animation: animate__swing 1s ease;
}

对应的 HTML：

杰易OA办公自动化系统6.0

基于Intranet/Internet 的Web下的办公自动化系统，采用了当今最先进的PHP技术，是综合大量用户的需求,经过充分的用户论证的基础上开发出来的，独特的即时信息、短信、电子邮件系统、完善的工作流、数据库安全备份等功能使得信息在企业内部传递效率极大提高，信息传递过程中耗费降到最低。办公人员得以从繁杂的日常办公事务处理中解放出来，参与更多的富于思考性和创造性的工作。系统力求突出体系结构简明

0 查看详情杰易OA办公自动化系统6.0

卡片

注意：必须保留 animate__animated 类，否则 animation 属性不会生效。

3. 避免重复触发：控制动画节奏

如果快速多次悬停，动画可能反复播放，影响体验。可以通过 CSS 控制：

.my-element {
  animation-duration: 0.6s;
  animation-fill-mode: both;
}

.my-element:hover {
  animation-name: animate__pulse;
  animation-iteration-count: infinite; /* 可选：持续动画 */
}

或者限制只播放一次，防止叠加：

.my-element {
transition: none;
}

.my-element:hover {
animation: animate__fadeIn 0.5s;
}

4. J*aScript 辅助实现更精细控制（可选）

如果需要更复杂的逻辑，比如只播放一次动画，可以用 JS 添加和移除类：

document.querySelector('.btn').addEventListener('mouseenter', function () {
  if (!this.classList.contains('animate__animated')) {
    this.classList.add('animate__animated', 'animate__tada');
  }
});

这种方式适合“只动画一次”的场景。

基本上就这些。结合 Animate.css 和 :hover 能快速实现吸引人的交互效果，关键是正确引用动画名称并管理好动画状态。不复杂但容易忽略细节。