纯CSS加载动画应使用transform和opacity配合@keyframes，避免重排；单div旋转示例：.loader{width:20px;height:20px;border:2px solid #eee;border-top-color:#333;border-radius:50%;animation:spin 0.8s linear infinite;}@keyframes spin{to{transform:rotate(360deg);}}
用 div 实现纯 CSS 加载动画，不依赖 JS
只要结构合理、CSS 控制得当，div 完全能做出流畅的加载动画，比如旋转、脉冲、骨架屏等。关键不是“能不能”，而是“怎么让浏览器高效渲染且不卡顿”。
推荐用单个 div 配合 @keyframes + transform，避免用 margin 或 left/top 触发重排，否则低端设备容易掉帧。
- 动画必须用
transform和opacity，这两者走 GPU 合成层 - 加
will-change: transform提前声明（仅对高频动画项） - 别用
animation-timing-function: step-start模拟逐帧——它在 Safari 上有兼容问题 - 示例：一个最小可用的旋转 loader
<div class="loader"></div>
<style>
.loader {
width: 20px;
height: 20px;
border: 2px solid #eee;
border-top-color: #333;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
</style>
多个 div 堆叠时，z-index 和 opacity 的坑
常见做法是用 3–4 个 div 做波纹或点阵动画，但很容易出现“动画错位”或“部分元素不动”。根本原因不是代码写错，而是层叠上下文和渲染顺序没理清。
- 每个动画
div必须设position: absolute或relative，否则文档流里会挤占空间 - 如果父容器没设
position: relative，子div的absolute会相对 body 定位，导致偏移不可控 -
opacity: 0.7在 iOS Safari 下可能触发额外合成层，拖慢动画；建议改用rgba(0,0,0,0.7)控制颜色透明度 - 不要给多个动画
div设相同animation-delay却不同animation-duration——时间轴容易打架，视觉节奏混乱
响应式场景下 div 动画缩放失真怎么办
用 vw 或 % 设置宽高后，动画在横竖屏切换时可能拉伸变形，尤其旋转类动画的圆心偏移明显。
立即学习“前端免费学习笔记（深入）”；
- 统一用
width/height配合aspect-ratio: 1（现代浏览器支持），比padding-top: 100%更可靠 - 旋转动画务必加
transform-origin: center，否则默认是左上角，缩放后会“甩出去” - 媒体查询里重设
animation-duration要谨慎：从 0.6s 改到 1.2s 可能造成视觉突跳，建议用animation-play-state: paused+ JS 切换更稳妥 - 小屏幕慎用多层阴影（
box-shadow），叠加 3 层以上在低端 Android 上易掉帧
隐藏加载动画时，display: none 还是 visibility: hidden
直接 display: none 最省事，但会触发重排，且下次显示要重新走 layout → paint → composite 流程；而 visibility: hidden 保留布局空间，动画恢复更快。
- 如果 loader 是页面顶部固定位置，用
visibility: hidden+opacity: 0组合最平滑 - 若 loader 插在内容流中（如按钮内部），用
display: none更安全，避免留白干扰布局 - 千万别用
height: 0; overflow: hidden配合过渡——动画结束瞬间高度归零会闪一下 - JS 控制显隐时，优先操作 class（如
loader--hidden），别直接改 style，方便复用和调试
真正难的不是画出转圈，而是让动画在各种设备、各种网络状态下都稳得住。多数人卡在“看起来动了”，却没留意 FPS 是否稳定、是否偶发卡顿、切后台再回来会不会丢帧——这些才是上线前必须实测的点。
