repeating-gradient 动画不起作用？检查 background-image 是否被覆盖
直接写 background-image: repeating-gradient(...) 再加 animation，大概率没反应——因为 CSS 动画不能直接驱动渐变本身的变化。浏览器不支持对 repeating-gradient 的参数做插值动画（比如旋转角度、色标位置）。
真正可行的路径只有一条：用 background-image 固定图案，靠 background-position 或 transform: rotate() 驱动动画。前者适合平铺位移，后者适合旋转效果，但要注意容器是否设了 overflow: hidden 或尺寸限制。
- 如果想让斜线网格「转起来」，优先用
transform: rotate()包裹一个伪元素或子容器，里面放静态repeating-gradient - 如果想模拟「滚动纹理」，用
background-position+@keyframes，但必须设background-repeat: repeat且容器有明确宽高 - 别在
background-image里写变量或 calc() 角度值试图动画——CSS 不解析这种动态计算
repeating-gradient 斜线角度怎么写才不糊？注意单位和方向逻辑
repeating-gradient 的角度不是从 X 轴逆时针算的标准数学角，而是按「to top」「to right」这类关键词或「deg」值定义方向。写 45deg 和 to bottom right 效果不同，前者是标准角度，后者是方位关键词，渲染引擎处理方式略有差异，尤其在缩放或 DPR > 1 的屏幕下容易出现像素级错位或摩尔纹。
- 统一用
deg单位（如45deg），避免混用to关键词 - 斜线间距建议设为偶数像素（如
2px、4px），避开 subpixel 渲染抖动 - 颜色过渡段尽量短，例如
black 0%, black 1px, transparent 1px, transparent 2px，否则动画中易出现虚边
动画卡顿或闪烁？绕过 background-clip 和 repaint 陷阱
用 background-position 动画时，如果容器有 border-radius、mask 或 backdrop-filter，每次重绘都可能触发全层重排，尤其在 Safari 上明显掉帧。而用 transform: rotate() 虽然硬件加速友好，但若旋转中心没设准（默认是元素中心），图案会偏移出视口。
立即学习“前端免费学习笔记（深入）”；
- 给动画元素加
will-change: transform（仅当真需要时），但别滥用，否则内存占用飙升 - 旋转场景下，务必配
transform-origin: 0 0或具体坐标，确保图案绕自身左上角转，方便平铺对齐 - 避免在
:hover里突然开启复杂背景动画——预加载或用opacity过渡更稳
兼容性雷区：Firefox 不支持 repeating-gradient 里的 animation-timing-function
Chrome 和 Safari 允许在 @keyframes 中用 ease-in-out 控制 background-position 变化节奏，但 Firefox 对 repeating-gradient 相关属性的插值支持更保守，有时会跳帧或硬切。这不是 bug，是规范实现差异。
- 动画曲线统一用
linear最稳妥，视觉差异小，兼容性拉满 - 如需缓动效果，改用 JS 控制
requestAnimationFrame+style.backgroundPosition，手动插值 - 测试必查 Firefox DevTools 的「Rendering」面板，开「Paint Flashing」看是否频繁重绘
真正难的不是写出来，是让同一段代码在 Chrome/Firefox/Safari 下纹理对齐、帧率稳定、不闪不糊——这些细节藏在角度单位、transform-origin、以及你没写的那行 will-change 里。
