用@keyframes定义旋转关键帧并配合animation实现无JS加载动画，需注意border-radius设为50%、单设border-top-color形成缺口效果、animation加infinite属性；避免触发布局的属性动画，优先使用transform和opacity，合理设置动画时长（0.4s–1.2s）并启用GPU加速。
直接用 @keyframes 配合 animation 就能做出轻量、无 JS 的加载动画，关键在控制循环、时长和视觉节奏。
怎么写一个基础旋转加载动画
最常用的是无限旋转的圆圈或 logo。核心是定义旋转关键帧，再绑定到元素上：
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.loading-spinner {
width: 24px;
height: 24px;
border: 2px solid #eee;
border-top-color: #007bff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
注意三点：border-radius: 50% 确保是圆；border-top-color 单独设色形成“缺口旋转”效果；animation 必须带 infinite 才持续动。
为什么 loading 动画卡顿或跳帧
常见原因不是代码写错，而是渲染层没交由 GPU 加速或触发了重排：
立即学习“前端免费学习笔记（深入）”；
-
transform和opacity是安全属性，优先用它们做动画；避免对width、height、left等触发布局（layout）的属性做动画 - 加
will-change: transform或transform: translateZ(0)可强制提升为合成层，但别滥用，尤其在大量元素上 - 动画时长别设太短（如
0.1s），低端设备可能跟不上帧率，建议0.4s–1.2s区间
如何让动画随数据加载状态切换显隐
纯 CSS 控制显示/隐藏，不依赖 JS 操作 class，可以用 :not() 或兄弟选择器配合隐藏逻辑，但更稳妥的是用 JS 切换 class：
.loading-spinner {
opacity: 0;
transition: opacity 0.2s ease;
}
.loading-spinner.active {
opacity: 1;
}
JS 中只需：spinner.classList.toggle('active', isLoading)。不要用 display: none，它会中断动画状态；用 opacity + visibility 或 pointer-events: none 更平滑。
几个实用变体：缩放脉冲 & 骨架屏过渡
除了旋转，两种高频场景：
-
脉冲效果：适合按钮加载，用
scale+opacity：@keyframes pulse { 0% { transform: scale(0.95); opacity: 0.6; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.95); opacity: 0.6; } } -
骨架屏占位：不用动画，用
linear-gradient模拟内容区块，并加animation: loading-shimmer 1.5s infinite做光效扫过，比旋转图标更贴近真实内容结构
真正难的不是写出来，而是让动画在低配安卓机、旧版 Safari 或高缩放 Windows 屏上保持流畅——多测 animation-timing-function 和硬件加速触发点，比堆 fancy 效果重要得多。
