background-position动画更可靠，因其仅改变渐变绘制起点，不触发重排重绘，gpu加速稳定且像素对齐精准；而opacity仅调透明度难显结构，transform移动会引发safari及安卓webview边缘发虚、锯齿等问题。
为什么 background-position 动画比 opacity 或 transform 更可靠
因为 opacity 闪烁只改变透明度，看不出内容结构浮现；transform 移动整个元素会触发重排，在 Safari 和部分安卓 WebView 中边缘发虚、锯齿明显。而 background-position 只改渐变绘制起点，不重绘、不重排，GPU 加速稳定，像素对齐精准。
常见错误是写成 transform: translateX() 或 opacity: 0.5 → 1，结果在 iOS Safari 上光效卡顿、安卓低端机掉帧。正确做法始终锁定 background-position 的 x 轴位移。
- 必须搭配
background-repeat: no-repeat，否则重复背景导致光条跳变 - 起始值要带单位：
background-position: -200px 0，不能写成-200 0（IE/旧 Chrome 会忽略） - 动画缓动必须用
linear，ease会让光效在两端滞留，破坏流动感
两层 linear-gradient 叠加的写法与参数耦合关系
单层 linear-gradient 只能铺色，无法同时表达「结构轮廓」和「扫光动效」。必须用 background-image 显式声明两层：底层画结构（头像圆角、标题长条），上层是半透光扫条。
关键陷阱在于两层必须共用同一组 background-size 和 background-position，否则动画错位、光条漂移。
- 底层结构示例：
radial-gradient(circle, #f0f0f0 0%, #f0f0f0 50%, transparent 50%)画头像 - 上层扫光示例：
linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%) -
background-size必须设为固定像素，如200px 100%；rem、vw在 iOS Safari 中完全失效 - 若改了
background-size: 300px 100%，动画关键帧里的background-position也得同步调成-300px 0→300px 0
移动端适配中 background-size 单位踩坑点
iOS Safari（包括所有 WebKit 内核）不支持 rem、vh、vw 作为 background-size 的单位。写 background-size: 20rem 100% 会被直接忽略，退化为默认值，导致光条拉伸变形甚至消失。
安全方案是用固定像素 + 容器自身响应式控制：
- 容器设
width: 100%; max-width: 100%，配合<meta name="viewport" content="width=device-width, initial-scale=1"> -
background-size写成200px 100%（宽度大于典型容器，确保位移空间） - 如需动态适配，用 JS 计算：
el.style.backgroundSize = `${window.innerWidth * 1.5}px 100%` - 切忌在
:root或全局 class 上设骨架动画，只作用于具体容器如.skeleton-card
如何让骨架屏只在 loading 状态生效且无缝切换
最轻量的控制方式是靠 class 切换，而不是操作内联样式或 display 属性。JS 只需增删一个 class，CSS 全部承接。
错误做法是 style.display = 'none' 或 visibility: hidden，这会导致 DOM 占位丢失，真实内容渲染后页面跳动。
- 初始状态加
class="skeleton-active"，CSS 中写.skeleton-active .skeleton-item - 加载完成时执行
el.classList.remove('skeleton-active')，骨架自动退场 - 文字类占位需设
font-size: 0; line-height: 0，否则文字透出干扰灰阶效果 - 图片占位区域必须显式设
border-radius，否则圆角图骨架显示直角边框
最容易被忽略的是 background-size 和 background-position 的数值耦合——改了前者却没同步调动画关键帧，结果光效只动一半就重头开始，用户感知不到完整扫描流。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
