CSS @keyframes 可实现无需 JavaScript 的轻量加载动画：1. 圆圈旋转用 border+rotate；2. 骨架屏用渐变背景+translateX脉冲；3. 多点跳动用 opacity 动画+延迟；4. 优先使用 transform/opacity 保障性能。
用 CSS @keyframes 实现加载中（loading）动画，核心是定义一个循环播放的帧动画，再应用到目标元素上。不需要 JavaScript 就能完成，轻量、高效、易维护。
1. 基础圆圈旋转动画（最常用）
适用于按钮、图标、独立 loading 指示器等场景。通过 border 和 border-radius: 50% 绘制圆环，再用 transform: rotate() 驱动旋转：
@keyframes spin {
to { transform: rotate(360deg); }
}
.loading-spinner {
width: 20px;
height: 20px;
border: 2px solid #eee;
border-top-color: #007bff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
说明：只给顶部边框设色，其余为浅灰，旋转时就形成“流动”的视觉效果。时长（1s）、速度曲线（linear）和循环（infinite）缺一不可。
2. 骨架屏式脉冲动画（模拟内容加载）
适合列表、卡片等区域占位，用渐变背景 + 位移模拟“扫描光效”：
立即学习“前端免费学习笔记（深入）”；
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.skeleton {
background: linear-gradient(90deg, transparent, #f0f0f0, transparent);
background-size: 200% 100%;
animation: shimmer 2s infinite;
}
建议：把该类名加在灰色占位块上（如 ），动画会从左到右扫过，模拟数据加载中的状态。
3. 多点跳动动画（如省略号或三颗小球）
适合文字后缀（如“加载中…”）或独立指示组件。用多个伪元素分别控制延迟：
- 用
::after生成三个点，并设相同动画 - 每个点用
animation-delay错开时间，实现波浪式跳动 - 关键帧只需控制
opacity或transform: scale()
@keyframes bounce {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}
.loading-dots::after {
content: "…";
animation: bounce 1.5s infinite;
}
.loading-dots::after {
animation-delay: 0.2s;
}
.loading-dots::after {
animation-delay: 0.4s;
}
注意：实际中更推荐用三个独立 元素，比伪元素更可控；若用伪元素，需配合 display: inline-block 和 vertical-align 对齐。
4. 性能与兼容性提醒
动画应优先使用 transform 和 opacity，避免触发布局（layout）和绘制（paint），保证流畅：
- ✅ 推荐：
transform: rotate()、transform: translateX()、opacity - ❌ 避免：
width、height、left/top、background-color（会强制重绘） - 兼容性：现代浏览器均支持
@keyframes；如需支持 IE10+，可加@-webkit-keyframes前缀（目前基本可省略）
加载动画本质是用户体验信号，不必过度复杂——清晰、稳定、符合品牌色，比炫技更重要。
