Animate.css 是一个轻量级 CSS 动画库，通过引入 CDN 或 npm 安装后，使用 animate__animated 与预设类如 fade-in、slide-in-left 实现元素动画，支持 JavaScript 控制触发时机与重复次数，并可通过自定义 CSS 变量调整动画时长，适用于快速提升页面交互效果。
Animate.css 是一个轻量级的 CSS 动画库，能让你快速为元素添加平滑的渐变动画效果，无需编写复杂的 keyframes 或 transition 规则。通过简单的类名调用，就能实现如淡入、滑动、缩放等常见动效。
引入 Animate.css 库
在使用之前，需要先将 Animate.css 引入项目中。最简单的方式是通过 CDN：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
也可以通过 npm 安装：
npm install animate.css
然后在入口文件（如 main.js 或 styles.scss）中导入：
立即学习“前端免费学习笔记（深入）”；
@import 'animate.css';
常用渐变类与使用方式
Animate.css 提供了多种预设的进入和退出动画，适合用于提示、弹窗、内容加载等场景。
常见的渐变类包括：- fade-in：元素淡入显示
- fade-out：元素淡出隐藏
- slide-in-left / slide-in-right：从左右侧滑入
- zoom-in：放大式出现
使用方法非常简单，只需在目标元素上添加 animate__animated 和对应的动画类名即可：
<div class="animate__animated animate__fadeIn"> 我会淡入出现 </div>
注意：所有 Animate.css 类都需要加上 animate__ 前缀，避免命名冲突。
控制动画行为
你可以通过 JavaScript 动态添加或移除类来控制动画触发时机：
const element = document.querySelector('#myElement');
element.classList.add('animate__animated', 'animate__fadeIn');
如果想让动画只播放一次后保持最终状态，可以监听 animationend 事件：
element.addEventListener('animationend', () => {
element.classList.remove('animate__animated', 'animate__fadeIn');
});
还可以配合 CSS 自定义动画速度：
.slow-fade {
--animate-duration: 2s;
}
实用小技巧
- 多个动画可叠加使用，例如同时滑入并淡入：
animate__slideInLeft animate__fadeIn - 使用
animate__repeat-2可让动画重复两次 - 隐藏元素时建议结合
visibility或display控制，避免占位问题
基本上就这些。Animate.css 让前端动效变得极其简单，特别适合快速开发阶段提升交互质感，不复杂但容易忽略细节，比如前缀和事件清理。合理使用能让页面更生动。
