用 background-size 配合 background-position 动画可实现流光效果，但需严格配对参数；Safari 因默认不为 background-position 创建合成层而失效，须加 transform: translateZ(0) 强制 GPU 合成。
直接用 background-size 配合 background-position 动画就能实现，但关键不是“配”，而是“配对方式”必须严格——错一个参数，光就卡住、闪一下或根本不动。
为什么 background-position 动画常在 Safari 里失效
Safari（尤其 iOS）默认不为 background-position 创建合成层，即使动画逻辑完全正确，也可能表现为“属性值在变，画面不动”。这不是 bug，是渲染策略保守。
- 必须加
transform: translateZ(0)或will-change: background-position强制启用 GPU 合成（前者更稳妥） - 不能依赖
background-attachment: scroll，它会干扰位移计算；设为local或干脆不写 - 检查是否误用了
background-color过渡——流光和颜色过渡无关，transition对它无效
background-size 设多少才够用
background-size 决定了渐变图的“可滚动范围”。设太小，光条扫不到边；设太大，动画位移比例失衡，看起来像卡顿或静止。
- 横向流光：用
background-size: 200% 100%（最常用），起始background-position: -100% 0，终点100% 0 - 斜向或全向流动（如 45deg 渐变）：推荐
background-size: 200% 200%，避免角落漏光 - 高精度控制（比如想让光带宽度固定为 40px）：改用像素单位，例如
background-size: 200px 100%，再配合background-position: -200px 0 → 0 0
动画关键帧怎么写才平滑不跳帧
用百分比写 background-position 是主流做法，但容易因浏览器重排导致掉帧。更稳的写法是控制节奏与缓冲空间。
立即学习“前端免费学习笔记（深入）”；
- 别写
0% { background-position: 0 0; } 100% { background-position: 200% 0; }——这会让光从中间突然“弹出” - 标准写法：
0% { background-position: -100% 0; } 100% { background-position: 100% 0; }，确保光从左边缘完整进入、右边缘完整退出 - 想加缓动感？把
animation-timing-function改成cubic-bezier(0.3, 0.7, 0.5, 1)，比linear更自然 - 动画时长建议 2s–4s；低于 1.5s 看不清流动，高于 5s 容易被当成静态背景
真正容易被忽略的是圆角场景：如果按钮有 border-radius，但没设 background-clip: padding-box（默认值，一般不用显式写），渐变背景可能在圆角处被裁切错位，导致光效断裂。这不是动画问题，是盒模型理解偏差。
