CSSkeyframes实现加载动画教程

本文详解如何仅用纯CSS的@keyframes实现高效、轻量且高性能的加载动画，涵盖四种实用场景：基础圆圈旋转、骨架屏脉冲扫描、多点波浪跳动，以及关键的性能优化原则——优先使用transform和opacity属性以避免重排重绘，确保动画流畅；无需JavaScript，代码简洁易维护，兼顾现代浏览器兼容性与用户体验本质：清晰、稳定、品牌一致比炫技更重要。

用 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 前缀（目前基本可省略）

加载动画本质是用户体验信号，不必过度复杂——清晰、稳定、符合品牌色，比炫技更重要。

今天关于《CSSkeyframes实现加载动画教程》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！