想在网页中加入生动的按钮点击、卡片入场或弹窗弹出效果，并不一定要从零开始编写关键帧动画。Animate.css提供了一整套开箱即用的动画预设，把常见的弹跳、淡入、旋转、滑动等效果封装成固定类名。你只需在页面中引入样式文件，再给目标元素添加两个类，浏览器就会自动完成动画播放。这篇文章会从引入方式、类名规则、动态触发和自定义扩展四个维度详细拆解。
一、Animate.css的引入与基本调用
Animate.css可以通过CDN、npm安装或直接下载文件到本地来使用。使用CDN是最快的方式，只需在HTML的<head>区域加入一个<link>标签，指向Animate.css的压缩样式文件。该文件本质上是一系列预定义关键帧动画和配套类名的集合，加载完成后不会影响页面现有样式，只有当你主动给元素添加动画类时才会触发效果。
下面是一个最简单的接入示例，展示了如何通过CDN引入样式并让一个元素执行弹跳动画：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> <div class="animate__animated animate__bounce">我会弹跳一次</div>
需要注意的是，Animate.css v4版本开始统一使用animate__前缀。如果你按照旧教程只写animated bounce，动画不会生效。目标元素必须同时包含animate__animated基础类和具体动画类，例如animate__bounce。基础类负责声明动画执行环境，具体动画类负责指定要播放哪一组关键帧，二者缺一不可。
二、常用动画预设与CSS变量调整
Animate.css把动画预设划分成多个语义化分组，包括进入动画、退出动画、注意力吸引动画、弹性动画、淡入淡出动画、翻转动画、旋转动画、滑动动画、缩放动画以及特殊效果动画。比如fadeInUp表示淡入并向上移动，zoomIn表示缩放进入，slideInLeft表示从左侧滑入，pulse表示脉冲式放大缩小，heartBeat表示类似心跳的连续缩放。选择动画时不需要记忆所有名称，只要根据元素出现或退出的方向、节奏和视觉重点选择相近的类即可。
在HTML中组合这些动画类时，仍然需要保留基础类animate__animated。例如让一个卡片以淡入上移的方式出现，可以这样写：
<div class="animate__animated animate__fadeInUp">这条信息会淡入并向上移动</div>
Animate.css还允许通过CSS变量调整动画的时长、延迟和重复次数。你可以在目标元素或它的父级容器上设置--animate-duration、--animate-delay和--animate-repeat。这些变量会被Animate.css内部动画声明读取，因此不需要覆盖原始类名。下面的代码让标题延迟0.4秒后开始动画，持续1.5秒，并重复播放2次：
.hero-title {
--animate-duration: 1.5s;
--animate-delay: 0.4s;
--animate-repeat: 2;
}
<h1 class="animate__animated animate__zoomIn hero-title">欢迎访问</h1>
除了CSS变量，Animate.css还提供了一些快捷辅助类，例如animate__delay-1s、animate__delay-2s用来设置延迟，animate__slow、animate__slower、animate__fast、animate__faster用来改变动画速度，animate__repeat-1、animate__repeat-2、animate__repeat-3和animate__infinite用来控制重复次数。这些辅助类适合快速原型调试，而CSS变量更适合需要统一维护动画参数的正式项目。
三、用JavaScript控制动画触发时机
如果动画只在页面加载时执行一次，使用场景会比较受限。很多情况下，按钮点击、表单提交成功、滚动到某个区域、弹窗打开时才需要触发动画。这时可以通过JavaScript动态添加或移除动画类。核心思路是：先让元素保持初始状态，当事件发生时添加animate__animated和具体动画类，等动画结束后再把这两个类移除，以便下一次可以重新触发。
下面的示例演示了点击按钮后触发弹窗的缩放进入效果，并在动画结束后清理类名：
const openBtn = document.querySelector('#openBtn');
const modal = document.querySelector('#modal');
openBtn.addEventListener('click', () => {
modal.classList.add('animate__animated', 'animate__zoomIn');
modal.addEventListener('animationend', (event) => {
if (event.target !== modal) return;
modal.classList.remove('animate__animated', 'animate__zoomIn');
}, { once: true });
});需要特别留意animationend事件可能会从子元素冒泡上来。如果弹窗内部有其他元素正在执行动画，父容器也会收到这些子元素的结束事件。上面代码通过event.target !== modal做了过滤，确保只有目标元素自身的动画结束时才清理类名。如果不做过滤，父容器的动画类可能被提前移除，导致弹窗突然消失或状态错乱。
滚动进入视口是另一种常见触发方式。可以借助IntersectionObserver监听目标元素，当元素进入视口时再添加动画类。这样首屏外的内容就不会在页面加载时提前完成动画，等用户滚动到对应位置时才会播放。下面的示例为所有带scroll-animate类的元素设置进入视口触发fadeInUp动画：
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate__animated', 'animate__fadeInUp');
observer.unobserve(entry.target);
}
});
}, { threshold: 0.3 });
document.querySelectorAll('.scroll-animate').forEach(el => observer.observe(el));这种方案的优势在于性能稳定，不需要监听滚动事件并频繁计算元素位置。对于需要重复播放的场景，应当移除动画类后再重新添加，同时可以结合requestAnimationFrame或短暂延时让浏览器重新计算样式，避免连续触发时动画不重新播放的问题。
四、按需加载、自定义关键帧与性能细节
完整的Animate.css压缩文件体积并不大，但如果你的页面只使用了其中两三个动画，仍然希望进一步减少样式体积，可以考虑只引入需要的动画源文件，或者使用构建工具进行按需打包。另一种方式是直接复制Animate.css中对应动画的关键帧规则到自己的样式表中。Animate.css中的动画大多围绕transform和opacity实现，复制后可以根据项目设计继续调整参数。
当你已经熟悉预设动画的使用方式后，可以尝试基于同样的命名思路编写自己的关键帧动画。比如下面这个轻量的弹出效果，只改变了缩放和透明度，就能给卡片入场带来更柔和的视觉感受：
@keyframes softPop {
0% {
transform: scale(0.85);
opacity: 0;
}
70% {
transform: scale(1.05);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.soft-pop {
animation: softPop 0.5s ease-out both;
}使用Animate.css并不代表可以忽略性能问题。尽量只对需要吸引用户注意的元素添加动画，避免在大量列表项上同时播放高成本动画。优先使用只改变transform和opacity的动画，因为这两个属性不会触发页面布局重排。对于弹跳、脉冲等连续动画，要控制重复次数和影响范围，避免长时间占用合成线程。
此外，部分用户会在操作系统中开启减少动态效果设置。为了提升可访问性，可以在项目中加入媒体查询，当用户偏好减少动画时关闭或大幅缩短动画。下面这段CSS会让Animate.css的动画在相关用户环境中几乎瞬时完成：
@media (prefers-reduced-motion: reduce) {
.animate__animated {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}从快速引入到按需裁剪，再到与JavaScript交互和性能控制，Animate.css的关键帧预设可以覆盖大多数日常动画需求。它最大的价值在于把高频动画封装成稳定、易读、易维护的类名，让开发者能够把精力集中在页面交互和视觉表达上，而不是反复调试关键帧的执行细节。
CSS动画Animate.css关键帧预设修改时间：2026-08-28 11:40:07