能否基于CSS变量定义@keyframes的百分比关键帧？

首先明确：标准CSS目前不支持直接在@keyframes的关键帧百分比中使用CSS变量。

原因在于，CSS变量是在样式计算阶段才会被解析替换，而@keyframes的关键帧百分比属于CSS语法结构的一部分，在样式解析阶段就需要确定，无法通过变量动态修改。

不过你可以通过以下几种替代方案实现适配字符数量的动画效果：

方案1：用CSS变量结合steps()函数与动态时长 #

如果你的动画是让字符依次呈现（比如逐个淡入），可以把动画设计成完整周期的过渡，再通过steps()函数拆分进度，配合字符数量动态计算总时长：

/* 定义变量：字符数、单个字符动画时长 */
:root {
  --char-count: 20;
  --per-char-duration: 0.2s;
  --total-duration: calc(var(--char-count) * var(--per-char-duration));
}

.text-anim {
  /* 使用steps拆分动画，步数等于字符数 */
  animation: fade-in var(--total-duration) steps(var(--char-count)) forwards;
}

/* 只需要定义首尾关键帧即可 */
@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

如果是每个字符需要独立的动画（比如每个字符有自己的位移+淡入），可以给每个字符单独设置animation-delay，用变量计算延迟时间：

.char-item {
  animation: single-char 0.2s forwards;
  /* 假设每个字符有data-index属性标记位置 */
  animation-delay: calc(var(--data-index) * var(--per-char-duration));
}

@keyframes single-char {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

这种方案纯CSS实现，无需JS介入，兼容性最好。

方案2：用JS动态生成@keyframes规则 #

如果必须调整关键帧的百分比，可以通过JS监听字符数量变化，动态创建或更新@keyframes规则：

function updateCharAnimation(charCount) {
  const stepPercent = 100 / charCount;
  // 拼接关键帧内容
  let keyframeContent = '';
  for (let i = 0; i < charCount; i++) {
    const startPercent = i * stepPercent;
    const endPercent = (i + 1) * stepPercent;
    // 这里替换成你的动画样式
    keyframeContent += `${startPercent}% { opacity: 0; } ${endPercent}% { opacity: 1; }`;
  }
  // 插入到页面的<style>标签中
  const styleEl = document.querySelector('#dynamic-keyframes') || document.createElement('style');
  styleEl.id = 'dynamic-keyframes';
  styleEl.textContent = `@keyframes char-animation { ${keyframeContent} }`;
  document.head.appendChild(styleEl);
}

// 调用示例：当字符数变为10时
updateCharAnimation(10);

这种方案灵活性最高，完全适配任意字符数量，但需要JS配合。

方案3：CSS Houdini（进阶方案） #

如果你需要纯CSS层面的动态关键帧，可以使用CSS Houdini的Animation Worklet，它允许通过JS自定义动画逻辑，结合CSS变量动态计算关键帧进度。不过目前这个特性的浏览器兼容性有限，适合对前沿特性友好的项目。

内容的提问来源于stack exchange，提问作者Konrad