用@keyframes配合background-position位移与无缝云图可实现平滑无限飘动，关键在无缝衔接、时间节奏控制及设备无关的百分比动画，需确保云图水平无缝、多层速度差合理、GPU加速优化。
用 @keyframes 配合 background-position 位移 + 无缝云图，就能做出真正平滑、无跳变的无限云朵飘动。关键不在“动”，而在“无缝衔接”和“时间节奏控制”。
云图必须是水平无缝拼接的
哪怕动效逻辑再对，图本身有接缝，滚动时就会卡顿或闪跳。不是模糊处理或加渐变就能掩盖的。
- 推荐用 SVG 手绘两朵基础云，横向复制并微调间距，导出为宽高比约 3:1 的 PNG（例如 1800×600），左右边缘像素完全一致
- 避免使用真实摄影云图——天然不具备水平平铺性；Photoshop 中可用
滤镜 → 其他 → 位移检查接缝，再用仿制图章修补 - 若用 CSS 生成云（如
radial-gradient），需确保重复单元宽度足够，且渐变中心偏移量严格匹配background-size
background-position 动画必须用百分比或视口单位
用像素值（如 0px → -1000px）会导致不同屏幕宽度下循环速度不一致，甚至在缩放时断裂。百分比才能绑定到背景图自身尺寸，实现设备无关的平滑位移。
- 设
background-size: 200% 100%，动画从0% 0%到-100% 0%，这样刚好滚动完一个完整图元 - 不要写
100% → 0%，CSS 动画会按最短路径插值，可能反向闪回；始终用单向递减（如0% → -100%） - 若需多层云速差，给每层设不同
background-size和动画时长，例如远层用300% 100%+40s，近层用150% 100%+12s
动画参数要避开浏览器重排陷阱
直接驱动 background-position 是安全的，但若叠加 transform 或触发布局计算（如改 width），就可能掉帧。尤其在移动端 Safari 上，background-position 是少数仍能 GPU 加速的属性之一。
立即学习“前端免费学习笔记（深入）”；
- 务必加
will-change: background-position（仅对动画元素），提前告知浏览器优化路径 - 动画时长建议 ≥ 8s，低于 5s 人眼易察觉循环起点；用
linear而非ease，避免速度波动破坏“风速恒定”感 - 别用
animation-iteration-count: infinite就完事——要在末尾帧和起始帧间做 0.1s 的steps(1)强制硬切，否则某些 Chrome 版本会在循环点微顿
最常被忽略的是云图本身的灰度统一性和层级明暗关系：同一动效下，如果近层云太实、远层云太淡，视觉上反而像卡顿。把云的 opacity 和 blur 做成与 background-size 反相关，才真正像在三维空间里飘。
