loader动画卡顿或闪烁因left/top触发重排重绘，而transform/opacity走合成层；旋转类必须用transform: rotate()并加will-change: transform；条形进度改用transform: scaleX()；高DPI发虚需偶数宽高+SVG方案；width过渡无效应改用scaleX()；消失时禁用display: none，改用opacity+visibility过渡。
loader动画卡顿或闪烁，为什么transform比left/top更可靠
因为浏览器对transform和opacity的动画能走合成层（compositor thread），不触发重排重绘；而用left、top、width等属性驱动动画，每次变化都会强制同步计算样式+布局+绘制，尤其在低端设备或复杂页面里容易掉帧甚至肉眼可见闪烁。
- 所有旋转类loader（如
spinner）必须用transform: rotate()，别用animation: spin 1s linear infinite配@keyframes spin { to { transform: rotate(360deg); } }这种写法——没问题，但别漏写will-change: transform或transform: translateZ(0)来提前提示浏览器升层 - 条形进度类（如
bar-loader）如果靠width变化实现，务必改用transform: scaleX()+origin-left，否则滚动中或JS密集执行时极易卡住 - IE11不支持
transform: scalex()动画缓动，得降级用filter: progid:DXImageTransform.Microsoft.Matrix——但建议直接放弃IE11支持，真要兼容就用SVG<animate></animate>
圆形loader在高DPI屏幕发虚，border-radius: 50%不够用
单纯设border-radius: 50%在Retina屏或Windows缩放125%/150%下，边缘会模糊。本质是元素像素边界没对齐设备物理像素，浏览器做了插值抗锯齿。
- 确保容器宽高是偶数px（比如
width: 40px; height: 40px），避免半像素渲染 - 加
image-rendering: -webkit-optimize-contrast;和image-rendering: crisp-edges;对部分圆角裁切有帮助，但不是万能 - 最稳方案：用
svg画圆+stroke-dasharray做旋转环，viewBox="0 0 100 100"配合width="40"天然适配缩放，且边缘锐利
条形loader宽度动态更新后动画跳变，transition没生效
常见于用JS修改style.width后，期望宽度平滑过渡，结果瞬间跳到目标值——因为width是不可动画的CSS属性（除非是max-width或flex-basis等少数），或者过渡被JS强制重排打断。
- 改用
transform: scaleX(X)，并确保父容器transform-origin: left center - 如果必须用宽度控制（比如服务端返回百分比），把
transition: width 0.3s ease;写在class里，而不是内联style；JS只负责切换class，别直接操作element.style.width - 注意：
scaleX()在Firefox旧版本中可能触发文字模糊，可加backface-visibility: hidden;缓解
加载完成时loader消失有延迟或残留，display: none不是好选择
display: none会立即移除元素，导致CSS动画中断、过渡失效，还可能让父容器突然重排，视觉上像“抽搐”。尤其在Vue/React中用v-if或{isLoading && <loader></loader>}时更明显。
立即学习“前端免费学习笔记（深入）”；
- 统一用
opacity: 0+visibility: hidden+transition: opacity 0.2s ease-out，动画结束再用display: none或卸载组件 - 监听
transitionend事件移除元素，或用setTimeout延时移除（时间需略长于CSS transition duration） - React中可用
react-transition-group的CSSTransition，Vue用<transition></transition>内置钩子，避免手写状态判断
transform层级、像素对齐和过渡时机里。 
