CSS弹跳动画怎么实现？Animate.cssbounce用法详解

想让网页元素实现弹跳动画，使用 Animate.css 是最快最简单的方法之一。Animate.css 是一个开源的 CSS 动画库，内置了包括 bounce（弹跳）在内的多种预设动画效果，无需编写复杂的 @keyframes 规则，只需添加对应的类名即可。

引入 Animate.css

在 HTML 文件的 中引入 Animate.css 的 CDN 链接：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

这样就可以在页面中使用所有 Animate.css 提供的动画类。

使用 bounce 类实现弹跳效果

要让某个元素产生弹跳动画，只需为该元素添加 animate__animated 和 animate__bounce 两个类：

<div class="animate__animated animate__bounce">我会上下弹跳！</div>

注意：从 v4 版本开始，类名前缀为 animate__，不要遗漏。

控制动画行为

你可以通过添加额外类来调整动画表现：

• animate__repeat-1：重复一次（总共播放2次）
• animate__infinite：无限循环播放
• animate__slow、animate__faster：调整动画速度

例如，让元素无限弹跳：

<button class="animate__animated animate__bounce animate__infinite">持续弹跳按钮</button>

触发动画（可选进阶）

默认情况下，页面加载时就会播放动画。如果希望点击后才弹跳，可以用 JavaScript 动态添加类：

document.querySelector('#myElement').classList.add('animate__animated', 'animate__bounce');

也可以配合事件使用：

element.addEventListener('click', function () {
  this.classList.add('animate__animated', 'animate__bounce');
});

基本上就这些。用 Animate.css 实现弹跳动画不复杂但容易忽略类名格式和依赖类 animate__animated。只要引入正确、类名写全，就能快速看到效果。