加载动画是网页交互中常见的元素，能够有效缓解用户等待时的焦虑感。Animate.css是一个跨浏览器的CSS动画库，内置了数十种预设动画效果，开发者只需添加对应的类名就能为元素添加动画，非常适合快速实现加载动画效果。
引入Animate.css库
使用Animate.css前需要先将其引入到项目中，有两种常用的引入方式。
CDN引入
直接在HTML的<head>标签中添加以下链接即可引入最新版本的Animate.css：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
本地引入
也可以从Animate.css的官方仓库下载源码，将CSS文件放到项目目录中后引入：
<link rel="stylesheet" href="./css/animate.min.css">
基础加载动画实现
Animate.css的动画通过添加animate__animated基类，再搭配具体动画类名实现。以下是几个常用的加载动画示例。
旋转加载动画
使用animate__rotateIn类可以实现旋转加载效果，代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旋转加载动画</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<style>
.loading-box {
width: 50px;
height: 50px;
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="loading-box animate__animated animate__rotateIn animate__infinite"></div>
</body>
</html>
上述代码中，animate__infinite类用于设置动画无限循环，符合加载动画的持续播放需求。
脉冲加载动画
使用animate__pulse类可以实现脉冲缩放的加载效果：
<div class="loading-circle animate__animated animate__pulse animate__infinite"></div>
<style>
.loading-circle {
width: 60px;
height: 60px;
background-color: #4CAF50;
border-radius: 50%;
margin: 100px auto;
}
</style>
自定义动画参数
Animate.css的动画参数可以通过CSS变量自定义，常见的可自定义参数如下：
| CSS变量 | 作用 | 默认值 |
|---|---|---|
| --animate-duration | 动画持续时间 | 1s |
| --animate-delay | 动画延迟时间 | 0s |
| --animate-repeat | 动画重复次数 | 1 |
以下是一个自定义动画持续时间为2秒的加载动画示例：
<div class="custom-loading animate__animated animate__rotateIn" style="--animate-duration: 2s;"></div>
<style>
.custom-loading {
width: 40px;
height: 40px;
background-color: #ff9800;
margin: 100px auto;
}
</style>
组合加载动画实现
还可以组合多个Animate.css的动画类，实现更复杂的加载效果，比如同时添加旋转和淡入效果：
<div class="combo-loading animate__animated animate__rotateIn animate__fadeIn animate__infinite"></div>
<style>
.combo-loading {
width: 70px;
height: 70px;
border: 8px solid #e0e0e0;
border-left-color: #9c27b0;
border-radius: 50%;
margin: 100px auto;
}
</style>
注意事项
- Animate.css的类名前缀是
animate__，使用时不要遗漏前缀 - 加载动画一般需要设置无限循环，记得添加
animate__infinite类 - 如果需要兼容旧版本浏览器，建议引入对应版本的Animate.css，并测试动画效果
- 不要在加载动画元素上添加过多的其他动画类，避免动画冲突导致效果异常
CSSAnimate.css加载动画动画类修改时间：2026-06-28 05:21:19