如何动态修改CSS动画时长的秒数值？

核心问题分析 #

你遇到的:root变量修改后动画时长未更新的问题，本质是运行中的动画不会自动读取新的CSS变量值，必须重启动画才能让新的时长生效；另外需确保变量作用域和CSS语法无错误。

可行修正方案 #

方案1：整数CSS变量+calc运算（适配你的第一种尝试） #

先在CSS中用整数变量配合calc转换为时间单位，修改变量后重启动画：

:root {
  --sec: 20; /* 存储整数，单位通过calc转换 */
}
.progress-border-animation {
  animation: border-spin linear infinite; /* 替换为你的动画名称 */
  animation-duration: calc(var(--sec) * 1s);
}

// 设置目标时长（整数，用于其他逻辑）
const targetSec = 60;
// 更新全局CSS变量
document.documentElement.style.setProperty('--sec', targetSec);

// 关键：重启动画以应用新时长
const animEl = document.querySelector('.progress-border-animation');
// 移除动画类 -> 强制重绘 -> 重新添加类
animEl.classList.remove('progress-border-animation');
void animEl.offsetWidth; // 触发浏览器重绘，必须保留
animEl.classList.add('progress-border-animation');

方案2：直接修改元素style.animationDuration（修复你的第三种尝试） #

直接操作元素样式时，必须先中断现有动画再重新设置，否则浏览器不会更新运行中的动画：

const targetSec = 60;
const animEl = document.querySelector('.progress-border-animation');

// 先清除动画状态
animEl.style.animation = 'none';
void animEl.offsetWidth; // 强制重绘

// 重新设置动画属性，包括新时长
animEl.style.animation = 'border-spin linear infinite';
animEl.style.animationDuration = `${targetSec}s`;

方案3：带单位的CSS变量（适配你的第二种尝试） #

如果用带s的变量，确保修改的是全局:root变量，同样需要重启动画：

:root {
  --timer-seconds: 5s; /* 初始值 */
}
.progress-border-animation {
  animation: border-spin linear infinite;
  animation-duration: var(--timer-seconds);
}

const targetSec = 60;
// 更新全局变量为带单位的字符串
document.documentElement.style.setProperty('--timer-seconds', `${targetSec}s`);

// 重启动画
const animEl = document.querySelector('.progress-border-animation');
animEl.classList.toggle('progress-border-animation');
void animEl.offsetWidth;
animEl.classList.toggle('progress-border-animation');

注意事项 #

• 始终验证元素选择器是否正确，可用console.log(animEl)确认是否选中目标元素。
• 若动画为单次执行，在动画启动前修改时长无需重启；无限循环动画必须重启才能读取新值。

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