直接用@keyframes配合background-position不够用，因响应式下容器宽度变化导致位移距离错配，且不同组件需独立控制速度、方向、延迟，硬编码css维护困难；自定义属性可抽离可变参数实现灵活配置。
为什么直接用 animation 配合 background-position 不够用
骨架屏波浪动画的核心是模拟光栅扫描或渐变高亮的流动感，单纯靠 @keyframes 移动背景图位置，在响应式场景下容易错位——比如容器宽度变化后，100% 的位移距离不再匹配实际内容宽度。更麻烦的是，不同组件（卡片、列表、头像）需要独立控制波浪速度、方向、延迟，硬编码 CSS 规则会导致大量重复和维护困难。
自定义属性的价值在于把“可变参数”从样式表中抽离出来，让每个骨架元素按需声明自己的节奏：
-
--wave-speed: 2s控制一次完整流动耗时 -
--wave-delay: -1s让多个骨架块形成交错波峰 -
--wave-direction: to right支持左右/上下切换（影响linear-gradient渐变轴向）
怎么用 :root 和组件级 style 分层管理变量
全局只定义默认值，具体组件通过内联 style 覆盖。这样既避免 CSS 文件膨胀，又保留 HTML 层的灵活性：
:root {
--wave-speed: 1.8s;
--wave-delay: -0.5s;
--wave-direction: to right;
}
.skeleton-card {
background: linear-gradient(
var(--wave-direction),
transparent 0%,
rgba(255, 255, 255, 0.1) 50%,
transparent 100%
);
background-size: 200% 100%;
animation: wave var(--wave-speed) ease-in-out infinite;
animation-delay: var(--wave-delay);
}
@keyframes wave {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
关键点：
- 必须用
background-size: 200% 100%，否则background-position移动 100% 只能覆盖一半宽度，波浪会“断开” -
animation-delay设为负值（如-0.5s），才能让动画从中间帧开始，避免首次渲染时出现突兀的黑块 - 如果组件需要垂直波浪（如进度条），只需在调用时写
style="--wave-direction: to bottom;"
为什么 background-image 不能用 url() 替代 linear-gradient
有人尝试用 SVG 贴图实现波浪，但会立刻遇到三个硬伤：
- SVG 图片缩放后边缘模糊，而
linear-gradient是矢量计算，100% 清晰 - 无法动态调整波峰宽度（即透明→半透→透明的过渡区间），
linear-gradient中的50%位置可由自定义属性传入（如rgba(255,255,255,0.1) var(--wave-peak: 50%)） - 加载外部 SVG 会触发额外 HTTP 请求，骨架屏本意是“无资源依赖”的极简占位
真正需要 SVG 波浪曲线时（比如要精确控制贝塞尔起伏），得用 mask-image 配合 conic-gradient，但那已超出骨架屏轻量需求，反而增加解析开销。
移动端真机上动画卡顿的隐藏原因
iOS Safari 对 background-position 动画的硬件加速支持不稳定，尤其在 position: fixed 或 overflow 滚动容器里。解决方案很直接：
- 给骨架元素加
transform: translateZ(0)强制 GPU 加速 - 把
animation拆成两个：一个只驱动transform（空动画），另一个保持background-position—— 这样 Safari 会优先优化 transform 层 - 避免在
:active或touchstart事件中动态修改自定义属性，iOS 下可能触发 style recalc 阻塞主线程
最易被忽略的是：波浪动画本身不是必需的视觉反馈，如果性能敏感（比如低端安卓机），应该允许通过 @media (prefers-reduced-motion: reduce) 直接关掉 animation: none，而不是降帧率硬撑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
