正确引入 Animate.css 并使用预设类名可快速实现动画效果。首先通过 CDN、npm 或本地文件引入库，然后为元素添加 animate__animated 基础类和对应动画类（如 animate__fadeIn）触发动画。支持控制动画次数、时长、延迟及组合使用，结合 JavaScript 可动态添加类实现交互触发，并在动画结束后移除类以重置状态。
要在项目中使用 Animate.css 实现动画效果，关键是正确引入库文件，并通过添加预设的类名来触发动画。Animate.css 是一个基于 CSS3 的动画库，提供了大量即用型动画，如淡入、滑动、弹跳等，无需编写复杂的 CSS 动画代码。
引入 Animate.css 到项目
在使用之前，需要将 Animate.css 添加到你的 HTML 项目中。有以下几种方式：
- 通过 CDN 引入：在页面的 <head> 标签中加入以下链接： <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 或 index.js）中导入：
import 'animate.css';
- 下载源码：从 GitHub 下载 Animate.css 文件并本地引用。
基本使用方法
Animate.css 的动画通过给元素添加特定的类名来触发。所有动画类都需要配合 animate__animated 基础类使用。
例如，让一个 div 淡入显示：
立即学习“前端免费学习笔记（深入）”；
<div class="animate__animated animate__fadeIn">Hello, 我会淡入！</div>常用动画类包括：
- animate__bounce：弹跳效果
- animate__fadeIn：淡入
- animate__slideInLeft：从左侧滑入
- animate__zoomIn：放大进入
- animate__flash：闪烁效果
控制动画行为
你可以通过附加类或内联样式进一步控制动画的表现：
-
设置动画次数：使用
animation-iteration-count，如 style="animation-iteration-count: 3;" 让动画播放 3 次。 - 设置动画时长：添加 style="animation-duration: 2s;" 来延长或缩短动画时间。
- 延迟执行：使用 style="animation-delay: 1s;" 延迟 1 秒后开始动画。
- 组合多个动画：可以同时添加多个动画类，但需注意顺序和兼容性。
结合 JavaScript 动态触发
通常我们不希望动画在页面加载时立即播放，而是通过用户交互（如点击、滚动）触发。这时可以用 JavaScript 动态添加类名。
示例：点击按钮后显示并动画元素
<button onclick="showBox()">显示动画框</button><div id="box" style="display:none;">我有动画！</div>
<script>
function showBox() {
const box = document.getElementById('box');
box.style.display = 'block';
box.classList.add('animate__animated', 'animate__fadeInUp');
}
</script>
动画结束后可选择移除类以重置状态：
box.addEventListener('animationend', () => {box.classList.remove('animate__animated', 'animate__fadeInUp');
});
基本上就这些。只要引入库、加类名、按需控制，就能快速为项目添加流畅的动画效果。不复杂但容易忽略细节，比如类名前缀和基础类的使用。
