animation-duration是唯一控制CSS动画速度的属性，@keyframes仅定义样式路径而不涉及时长；改其内部数值无效，正确调速需通过元素上的animation-duration、JS动态设置style.animationDuration或CSS变量绑定实现。

animation-duration 是唯一能直接控制 CSS 动画播放速度的属性，但“Composer关键帧”这个说法并不存在——CSS 里没有叫 Composer 的动画机制，你实际想调的是 @keyframes 定义的动画的播放快慢。

为什么改 @keyframes 里的数值没用

很多人在 @keyframes 规则里尝试写 animation-duration: 0.5s 或用 var(--speed)，结果完全无效。这是因为：

• @keyframes 只定义样式变化的“路径”，不控制时间；时间由元素上的 animation-duration 属性决定
• CSS 规范禁止在 @keyframes 块内解析 CSS 变量，transform: translateX(var(--x)) 这类写法会被静默忽略
• 浏览器看到非法声明不会报错，而是跳过，导致动画退回到默认 ease 或卡在第一帧

正确改速的三个实操路径

根据你的工程约束选一种：

Discussion Composer

围绕关键发现、作用机制、临床相关性及研究局限性展开讨论。适用于撰写或优化任何生物医学论文的“讨论（Discussion）”部分——包括结果解读、与既往文献关联、阐释意外发现、界定研究局限性，以及撰写结论。当用户输入以下任一指令时也会自动触发该功能： - “write my discussion” - “help me discuss my findings” - “how do I compare to prior studies” - “write the limitations par

下载

• 静态场景（如加载图标固定加速）：直接在 class 上改 animation-duration，例如 .loader--fast { animation-duration: 0.5s; }
• 需要 JS 动态调速（如用户拖拽滑块控制速度）：操作元素的 style.animationDuration，比如 el.style.animationDuration = '0.3s';
• 用 CSS 变量实现主题级切换（如深色模式下动画变慢）：在元素上定义变量，再绑定到 animation-duration，例如 animation-duration: var(--anim-speed, 1s);，然后通过 document.documentElement.style.setProperty('--anim-speed', '0.7s') 修改

Bootstrap 进度条这类封装组件怎么调速

不能靠改 HTML 或行内 style="animation-duration:..."，因为 Bootstrap 的 .progress-bar-animated 使用了 animation 简写属性，单设 animation-duration 会被忽略。

• 最稳妥：用更高权重的选择器重写整个 animation 声明，例如 .progress-bar-animated { animation: progress-bar-stripes 0.6s linear infinite; }
• 如果用 SCSS 源码：在导入 Bootstrap 前重定义 $progress-bar-animation-timing: 0.6s;
• 纯 CSS CDN 场景：必须确保你的新 @keyframes progress-bar-stripes 在 Bootstrap 之后加载，且名字、关键帧内容完全一致，否则覆盖失败

关键不是“怎么写关键帧”，而是“谁在控制节奏”——@keyframes 是剧本，animation-duration 才是导演手里的节拍器。漏掉这点，所有变量、JS、媒体查询都会失效。