使用 Animate.css 可快速实现弹跳动画，只需引入 CDN 并添加 animate__animated 和 animate__bounce 类，支持无限循环、速度控制及点击触发等交互。
想让网页元素实现弹跳动画，使用 Animate.css 是最快最简单的方法之一。Animate.css 是一个开源的 CSS 动画库，内置了包括 bounce（弹跳）在内的多种预设动画效果，无需编写复杂的 @keyframes 规则，只需添加对应的类名即可。
引入 Animate.css
在 HTML 文件的 <head> 中引入 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。只要引入正确、类名写全，就能快速看到效果。
