页面加载动画是提升用户等待体验的重要设计，CSS3凭借原生动画属性，无需依赖JavaScript就能实现流畅的加载动画效果，大幅降低开发成本。本文将继续介绍CSS3实现页面加载动画的具体方法，讲解核心属性的使用逻辑，并提供可直接复用的代码示例。
核心CSS3属性说明
实现加载动画主要依赖以下几个CSS3属性：
- @keyframes：定义动画的关键帧，指定动画在不同时间点的样式状态
- animation：将定义好的关键帧动画绑定到指定元素上，设置动画时长、循环方式等参数
- transform：实现元素的旋转、缩放、平移等形变效果，是加载动画常用的动态效果属性
常见加载动画实现示例
1. 旋转圆环加载动画
这是最常见的加载动画之一，通过旋转和边框样式组合实现：
/* 定义旋转动画关键帧 */
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* 圆环容器样式 */
.loading-circle {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
/* 绑定动画：动画名 时长 线性 无限循环 */
animation: rotate 1s linear infinite;
}
对应的HTML结构为：
<div class="loading-circle"></div>
2. 跳动圆点加载动画
多个圆点依次跳动的动画可以模拟加载等待的状态：
/* 定义跳动动画关键帧 */
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-15px);
}
}
/* 圆点基础样式 */
.dot {
width: 12px;
height: 12px;
background-color: #3498db;
border-radius: 50%;
display: inline-block;
margin: 0 4px;
}
/* 给三个圆点分别设置不同的动画延迟 */
.dot:nth-child(1) {
animation: bounce 1.2s ease-in-out infinite;
}
.dot:nth-child(2) {
animation: bounce 1.2s ease-in-out 0.2s infinite;
}
.dot:nth-child(3) {
animation: bounce 1.2s ease-in-out 0.4s infinite;
}
对应的HTML结构为：
<div class="loading-dots"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div>
3. 渐变进度条加载动画
模拟进度加载的渐变效果，适合页面资源加载场景：
/* 定义进度条动画关键帧 */
@keyframes progress {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
/* 进度条容器 */
.progress-bar {
width: 200px;
height: 4px;
background-color: #f3f3f3;
border-radius: 2px;
overflow: hidden;
}
/* 进度条动态部分 */
.progress-inner {
height: 100%;
background: linear-gradient(to right, #3498db, #2ecc71);
animation: progress 2s ease-in-out infinite;
}
对应的HTML结构为：
<div class="progress-bar"> <div class="progress-inner"></div> </div>
动画属性参数说明
animation属性的常用参数可以通过下表快速查阅：
| 参数 | 说明 | 常用值 |
|---|---|---|
| animation-name | 绑定的@keyframes动画名称 | 自定义关键帧名称 |
| animation-duration | 动画完成一个周期的时间 | 1s、0.5s等时间值 |
| animation-timing-function | 动画的速度曲线 | linear、ease、ease-in-out |
| animation-iteration-count | 动画循环次数 | infinite（无限循环）、具体数字 |
| animation-delay | 动画开始前的延迟时间 | 0s、0.2s等时间值 |
注意事项
- 使用
transform属性实现动画时，尽量优先使用会触发硬件加速的属性，提升动画流畅度 - 如果动画需要暂停，可以通过
animation-play-state: paused属性控制 - 避免给过多元素同时添加复杂动画，防止页面出现卡顿问题
- 对于低版本浏览器，可以添加
-webkit-等前缀兼容，比如-webkit-animation
CSS3页面加载动画animationkeyframestransform修改时间：2026-07-17 16:24:32