CSS 自定义属性（变量）不能在 @keyframes 规则中作为关键帧位置（如 5%、10%）使用；需改用 Web Animations API 实现基于文本长度的动态逐字符波浪动画。
css 自定义属性（变量）不能在 `@keyframes` 规则中作为关键帧位置（如 `5%`、`10%`）使用；需改用 web animations api 实现基于文本长度的动态逐字符波浪动画。
在 CSS 动画中，@keyframes 的关键帧位置（例如 0%、5%、100%）是静态语法值，不支持 CSS 变量插值。即使你通过 element.style.setProperty('--keyframe-offset', '10%') 设置了变量，也无法在 @keyframes 内写作 var(--keyframe-offset) —— 浏览器会直接忽略该声明，导致动画失效或回退到默认行为。
因此，当你的动画逻辑依赖文本长度（如每个字符占总动画时长的 1/N），而希望关键帧峰值（如上浮动作）精准落在每个字符的“责任区间”起始点时，纯 CSS 方案不可行。必须转向 JavaScript 驱动的动态动画方案。
✅ 推荐方案：Web Animations API（WAAPI）
WAAPI 允许在运行时精确构造关键帧序列，并支持动态计算 offset（归一化时间点，范围 0–1），完美适配可变长度文本：
const animateWave = (container, options = {}) => {
const {
text = container.dataset.text || '',
speed = 0.1, // 每字符延迟（秒）
translateY = '-5px'
} = options;
const charCount = [...text].length;
if (charCount === 0) return;
// 每个字符对应动画周期中的 1/charCount 区间 → 归一化 offset = 1/charCount
const segment = 1 / charCount;
const totalDuration = speed * charCount * 1000; // 转为毫秒
[...text].forEach((char, index) => {
const span = document.createElement('span');
span.innerHTML = char === ' ' ? ' ' : char;
container.appendChild(span);
// 关键帧：静止 → 上浮 → 暂留 → 回落（模拟 step-start 效果）
span.animate(
[
{ translate: '0 0', offset: Math.max(0, segment * index - 0.0001) },
{ translate: `0 ${translateY}`, offset: segment * index },
{ translate: `0 ${translateY}`, offset: Math.min(1, segment * (index + 1) - 0.0001) },
{ translate: '0 0', offset: segment * (index + 1) }
],
{
duration: totalDuration,
delay: index * speed * 1000,
iterations: Infinity,
easing: 'steps(1, start)' // 确保瞬时跳变，避免缓动干扰
}
);
});
};
// 启用所有 .wave 容器
document.querySelectorAll('.wave').forEach(el => animateWave(el));? 核心要点说明
-
offset是归一化值：WAAPI 中offset: 0.05等价于 CSS 中5%，且支持动态计算（如1 / charCount），这是 CSS@keyframes所不具备的能力； -
避免
step-start的 CSS 陷阱：原方案依赖animation-timing-function: step-start，但该函数作用于整个动画周期，难以与逐字符延迟协同；WAAPI 中通过显式设置多段offset+steps(1, start)更可控； -
空格处理一致：使用
-
性能友好：每个
<span></span>独立动画，浏览器可硬件加速，且无重复重排。
⚠️ 注意事项
- 不要混合使用 WAAPI 和 CSS
animation控制同一元素，否则行为不可预测； - 若需 SSR 或 JS 禁用降级，建议保留纯 CSS 备用版本（固定长度），并通过
@supports (animation: none)或class="js-enabled"进行渐进增强； -
offset值必须严格递增且在[0, 1]范围内；微小偏移（如-0.0001）用于规避相邻关键帧合并问题。
通过 WAAPI，你彻底摆脱了 CSS 关键帧的静态限制，实现了真正响应式、数据驱动的文字波浪动画 —— 文本长度变化时，动画节奏与视觉节奏始终同步。
立即学习“前端免费学习笔记（深入）”；
