骨架屏闪烁动画禁用opacity而用position+transform，因opacity在低端环境易卡顿，transform可硬件加速；须设父容器position:relative和overflow:hidden，伪元素宽高略大，ie11/ios12需降级left动画，多组件同步需js控制起始。
骨架屏里用 position 做闪烁动画，为什么不能直接改 opacity？
因为骨架屏常嵌在 SSR 或首屏直出的 HTML 里，opacity 动画触发重绘（repaint）但不触发重排（reflow），看似轻量，实则在低端安卓 webview 或旧版 safari 中容易卡顿甚至跳帧；而用 position: absolute 配合 transform: translateX() 移动伪元素，能走合成层（compositor layer），硬件加速更稳。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 闪烁效果别用
opacity过渡，改用一个覆盖在骨架块上的::before伪元素，设position: absolute+transform: translateX(-100%)，再用@keyframes平滑移动它 - 父容器必须设
position: relative，否则absolute会脱离文档流飞到 body 顶层，盖住真实内容 - 伪元素宽高要略大于骨架块（比如宽设
120%、高110%），避免边缘露白或闪烁断层
transform 动画在骨架屏中突然偏移或错位
常见现象：闪烁条从左往右扫，但扫到一半“跳”到顶部，或只扫了半截就消失。根本原因是父级骨架块没设 overflow: hidden，导致 transform 移动时超出部分被显示出来，视觉上像错位。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有承载骨架块的容器（比如
.skeleton-card、.skeleton-list-item）必须加overflow: hidden - 不要对骨架块本身做
transform，只对内部的遮罩层（如::before）做动画；否则会触发 layout shift，影响 CLS 指标 - 若用 css-in-JS（如 styled-components），注意动态插入样式时，
position: relative和overflow: hidden必须同时存在，漏一个就会错位
IE11 或 iOS 12 下闪烁动画完全不生效
不是代码写错了，是这些环境不支持 transform 在伪元素上的动画，或对 @keyframes 中的 transform 解析异常。尤其 iOS 12 的 UIWebView 对 transform: translateX() + 百分比值兼容性极差。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 降级方案：用
left+transition替代transform，但必须配合position: absolute和明确的width，否则 IE11 会忽略动画 - 检测环境后加载不同规则：用
@supports (transform: translateX(0))包裹现代写法，外层写 fallback 规则 - iOS 12 真机调试时，避免用
100vw做宽度基准——它在横屏切换后可能失效，改用100%或固定 rem 值
多个骨架块共用同一套闪烁动画，结果不同步
本质是 CSS 动画默认以全局时间为基准，但每个骨架块插入 dom 的时机不同（比如列表项逐个 render），导致 animation-delay 起始点错乱，看起来像“有的快有的慢”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 别依赖统一的
animation-delay，改用 JS 控制：给每个骨架块加唯一data-id，用requestAnimationFrame统一触发动画起始 - 如果纯 CSS 方案，用
animation-play-state: paused初始状态，再通过 class 切换running，确保所有块在数据 ready 后“一起开始” - 慎用
animation-iteration-count: infinite+animation-duration组合——不同设备帧率差异会让无限循环逐渐失步，建议设为1，靠 JS 重播控制节奏
事情说清了就结束。真正难的不是让动画动起来，而是让它在各种屏幕尺寸、渲染引擎、加载节奏下都不抢戏、不抽搐、不误伤真实内容。