骨架屏波浪动画的核心视觉特征是用线性渐变+横向位移动画模拟高亮区从左到右匀速扫过的流动感，而非真实波浪形变。
什么是骨架屏波浪动画的核心视觉特征
骨架屏的波浪动画本质是模拟光栅扫描或渐进加载的流动感，关键不在“波浪”本身，而是用线性渐变 + 位移动画制造「高亮区从左到右匀速扫过」的错觉。CSS 自定义属性（--wave-offset）在这里不是为了换主题色，而是把动画偏移量抽成可被 JS 控制或媒体查询响应的变量，避免硬编码 animation 关键帧。
用 background + linear-gradient 搭配 background-position 实现可变量控制的波浪效果
不能直接对 gradient 的颜色停靠点做动画，但可以动它的位置。把高亮区做成一个窄条状渐变，再用 background-size 拉宽，配合 background-position 横向移动：
.skeleton {
--wave-width: 100%;
--wave-height: 100%;
--wave-offset: -100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent
);
background-size: var(--wave-width) var(--wave-height);
background-position: var(--wave-offset) center;
animation: wave 2s ease-out infinite;
}
<p>@keyframes wave {
to {
--wave-offset: 100%;
}
}这段代码会报错——CSS 动画不能驱动自定义属性变化。所以必须改用 background-position 直接动画，把 --wave-offset 当作初始值传入：
- 写法上：用
background-position: calc(var(--wave-offset) * 1px) center是无效的，calc 不能参与动画起止值计算 - 正确做法：把偏移逻辑交给
animation本身，自定义属性只用于初始化或响应式切换，例如：--wave-offset: -200px→ 在 JS 中动态改这个值，再触发重绘 - 更实用的模式是：用自定义属性控制动画时长、延迟或方向，比如
--wave-duration: 1.8s，然后在@keyframes外用animation: wave var(--wave-duration) ease-out infinite
为什么 mask-image + linear-gradient 比纯 background 更适合复杂骨架结构
当骨架元素有圆角、图标占位、不规则容器时，单纯靠 background 会漏出高亮条或切不齐边缘。用 mask-image 把波浪效果「盖」在骨架形状上，才是真正解耦视觉与结构：
立即学习“前端免费学习笔记（深入）”；
.skeleton-avatar {
--mask-shape: radial-gradient(circle, black 70%, transparent 71%);
mask-image: var(--mask-shape);
background: linear-gradient(90deg, transparent, #eee, transparent);
background-size: 200% 100%;
animation: shimmer 2.5s infinite;
}
<p>@keyframes shimmer {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}注意点：
-
mask-image的兼容性：Chrome 106+、Firefox 111+、Safari 16.4+ 支持，旧版需降级为clip-path或透明度遮罩 -
background-size: 200% 100%是为了让渐变能完整扫过两次宽度，避免断层；background-position动画范围必须覆盖这个尺寸 - 如果骨架由多个元素组成（头像+标题+段落），不要给每个都加 mask 和动画，统一用父容器
overflow: hidden+ 子元素相对位移更轻量
JS 动态更新自定义属性触发动画重播的边界情况
直接改 element.style.setProperty('--wave-offset', '50px') 不会重播动画，因为 CSS 动画只在属性值“变化且触发重排/重绘”时重新计时。常见误操作：
- 在动画进行中修改
--wave-duration，但没重置animation：需配合animation: none瞬间清空再恢复 - 用
getComputedStyle读取后立刻改值，可能被浏览器合并为单次渲染，导致动画跳帧 - 服务端渲染（SSR）页面首次加载时，骨架屏 DOM 已存在，但自定义属性还没注入，需确保 JS 执行时机早于 CSS 动画触发（比如加
bodyclass 控制）
最稳的做法是：用 animation-play-state 暂停 + 强制重排 + 恢复播放：
el.style.animationPlayState = 'paused';
el.offsetHeight; // 强制重排
el.style.setProperty('--wave-duration', '1.6s');
el.style.animationPlayState = 'running';真正麻烦的不是怎么写动画，而是让骨架在加载完成瞬间“自然消失”——淡出动画和内容渲染节奏不同步时，用户会看到闪跳。这需要把骨架的 opacity 和 visibility 切换跟数据加载状态严格绑定，而不是依赖 CSS 动画结束事件。
