CSS变量不能驱动动画，仅用于存储值；动画仍需@keyframes和animation实现，变量优势在于解耦样式与逻辑，支持动态修改fill、opacity等非时序属性，但animation-duration等时序参数需硬编码或用element.animate()替代。
直接用 CSS 变量（--wave-fill、--wave-speed、--wave-opacity）控制波浪动画是可行的，但变量本身不能驱动动画——它们只负责“存值”，真正动起来还得靠 @keyframes 和 animation。变量的价值在于解耦样式与逻辑，改一处就能批量更新多层波浪的视觉参数。
为什么不能直接用变量替代 animation 属性
CSS 变量是运行时可变的自定义属性，但浏览器不支持把 animation-duration 或 background-position 的值写成 var(--wave-speed) 后自动触发重播。你改了 --wave-speed，已运行的动画不会暂停再以新时长重启；它只会继续按旧节奏跑完当前周期。
- 变量可被 JS 动态修改：
el.style.setProperty('--wave-speed', '6s') - 但要让动画响应变化，必须手动重置
animation：先移除再加回，或用animation-play-state: paused配合强制重排 - 更稳妥的做法是：变量只控制颜色、透明度、渐变位置等不影响时序的属性；时长、延迟等仍硬编码在
@keyframes或内联 style 中
用变量统一管理三层波浪的 fill 和 opacity
这是变量最实用的场景：避免重复写死颜色和透明度，同时保证层级间视觉协调。例如：
.wave-layer-1 {
--wave-fill: #2196F3;
--wave-opacity: 0.9;
}
.wave-layer-2 {
--wave-fill: #0D47A1;
--wave-opacity: 0.6;
}
.wave-layer-3 {
--wave-fill: #011F4B;
--wave-opacity: 0.3;
}
.wave-layer-1::before,
.wave-layer-2::before,
.wave-layer-3::before {
background: linear-gradient(to right, transparent, var(--wave-fill), transparent);
opacity: var(--wave-opacity);
animation: wave-flow 5s linear infinite;
}
注意：opacity 用变量没问题，但别给同一元素同时设 opacity 和 background 的透明通道（如 rgba(0,0,0,0.5)），否则会叠加导致过暗。
立即学习“前端免费学习笔记（深入）”；
变量配合 background-position 实现“可调速”错觉
虽然不能动态改 animation-duration，但你可以用变量控制 background-position 的位移幅度和频率，间接影响视觉速度感：
- 定义
--wave-shift-x: -200%;控制单次循环位移量 - 在
@keyframes中写background-position: var(--wave-shift-x) 100%; - JS 修改
--wave-shift-x值（比如从-200%改成-150%），位移变小 → 视觉上“变慢” - 需确保
background-size与位移单位一致（都用百分比或都用 px），否则跳帧
容易被忽略的兼容性陷阱
不是所有浏览器都支持在 @keyframes 里用 var()，尤其是 Safari 16.4 之前版本会静默失败。稳妥做法是：
- 只在静态声明中用变量（如
background、opacity、filter） - 把关键动画参数（
animation-duration、transform值）保留在@keyframes里硬编码 - 若真要 JS 动态控速，用
element.animate()API 替代 CSSanimation，它原生支持运行时更新关键帧
变量让维护变简单，但别指望它扛起整个动画调度——那是 @keyframes 和 JS 的事。真正难调的是波形密度、层间 offset 和硬件加速触发时机，这些没法靠换一个变量名解决。
