无限循环云朵动画需用@keyframes定义0%和100%为同一视觉状态，位移跨越容器宽+自身宽，时长30s～60s、timing-function为linear、添加infinite；多层云需错开duration与z-index，并加transform: translate3d()、backface-visibility: hidden防Safari抖动。
用 @keyframes 写无限循环的云朵位移动画
核心是让云朵从左到右匀速移动，且首尾帧无缝衔接。关键不是“动起来”，而是“看不出起点和终点”。@keyframes 必须定义 0% 和 100% 为同一视觉状态（比如都设为 transform: translateX(-100px)），但实际位移要跨过整个容器宽度加自身宽度，否则会卡顿或跳帧。
常见错误是只写 translateX(100%)，结果云朵移出视口后突然闪回——因为浏览器没做位移补偿，也没预留重复空间。
- 动画时长建议设为
30s～60s：太快像风扇，太慢看不出飘动 - 用
linear而非ease：云朵不会自己加速减速 - 别忘了加
infinite，否则只跑一遍就停了
background-position 滚动方案更适合纯背景图
如果云朵是拼在一张长图里的（比如 clouds-bg.png 宽度 2000px），用 background-position 配合 animation 更省资源——不用创建多个 DOM 元素，也不触发重排。
但要注意：图片必须水平无缝，且 background-size 要显式设为大于容器宽度的值（比如 250vw），否则滚动到边缘会露底色。
立即学习“前端免费学习笔记（深入）”；
- 动画关键帧写成
0% { background-position: 0 0; } 100% { background-position: -250vw 0; } - 容器需设
background-repeat: repeat-x，不然只动一次就没了 - IE11 不支持
background-position动画的负值过渡，得降级用 JS
多个云层叠加时，z-index 和动画时长必须错开
真实云有远近，近处快、远处慢。用三层 div 叠加时，不能全用相同 animation-duration，否则看起来像粘在一起的纸片。
更隐蔽的问题是：如果所有云层都用 position: absolute 且没设 z-index，它们会按 HTML 顺序堆叠——但动画一跑，渲染层可能意外提升，导致某层突然盖住文字。
- 最远层（天边）用
40s，中间层25s，最近层15s - 每层单独设
z-index（如1、2、3），别依赖文档流 - 给每层加
will-change: transform，防低端机掉帧
移动端 Safari 的 transform 渲染 bug 怎么绕
Safari iOS 15.4～16.2 有个经典问题：用 translateX 移动绝对定位元素时，偶尔会抽风式抖动，尤其在页面滚动中。这不是性能问题，是 WebKit 的合成层判定失误。
实测有效的解法不是降帧率，而是强制它走 GPU 合成路径——但不能只靠 transform: translateZ(0)，得搭配 backface-visibility: hidden 和透明度微调。
- 云朵元素加：
transform: translateX(0) translateZ(0); backface-visibility: hidden; - 动画里避免只写
translateX，统一用transform: translate3d(x, 0, 0) - 如果还抖，给父容器加
overflow: hidden切断层叠上下文干扰
真正麻烦的是混合了 filter: blur() 的云朵——Safari 会直接放弃硬件加速，这时候只能换 SVG 模糊或预渲染成 PNG。
