用@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 加速或触发了重排：
立即学习“前端免费学习笔记（深入）”；
触发式加载精美特效企业网站源码使用jquery实现了很多精美的触发式加载特效，网站首页在随着访客的滚动条滚动过程中会出现很多触发式加载的特殊效果，让这个网站的风格瞬间显得非常的高大上，让你的企业品牌在访客心中留下更深的影响。当然，我们在使用jquery特效的同时也要注意程序对搜索引擎的友好型，所以这一点儿作者也有考虑到，已经尽可能的对js和css脚本进行精简和优化，尽可能的加快网站加载速度，同时也
-
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 效果重要得多。
