直接修改@keyframes规则不可行，CSSOM中CSSKeyframesRule只读；可行方案为删除旧规则后用insertRule插入新规则，或用CSS自定义属性+calc()动态控制，或用Element.animate()精细调控。
直接修改 @keyframes 规则在标准 CSSOM 中不可行
CSSOM（CSS Object Model）不提供 API 直接读写或重定义 @keyframes 规则里的关键帧（如 0%、50%、100% 的 transform 值）。调用 document.styleSheets[0].cssRules 可以遍历规则，但 CSSKeyframesRule 是只读的——你无法调用 .appendRule() 或修改其子规则。强行赋值会静默失败或抛出 DOMException: NotSupportedError。
用 CSSStyleSheet.insertRule() 动态覆盖整个动画
可行路径是：先删除旧的 @keyframes 块，再插入一个全新命名（或同名）的规则。注意浏览器会按插入顺序解析，同名动画会被后插入的覆盖（前提是作用域一致，且无 !important 干扰）。
实操要点：
- 必须使用完整字符串构建新规则，例如
"@keyframes slideIn { from { transform: translateX(-100px); } to { transform: translateX(0); } }" - 插入前需确保目标
CSSStyleSheet允许修改（内联或已加载的外部表通常可以；Chrome 扩展注入的 sheet 可能受限） - 插入位置建议选在 sheet 末尾（
sheet.cssRules.length），避免被后续规则意外覆盖 - 动画名若与已有动画冲突，新规则生效后，所有引用该名的
animation-name会立即切换到新关键帧（无过渡）
const sheet = document.styleSheets[0];
const newAnim = `@keyframes bounce { 0% { transform: scaleY(1); } 50% { transform: scaleY(1.3); } 100% { transform: scaleY(1); } }`;
try {
sheet.deleteRule(0); // 假设旧规则在索引 0（需先定位）
sheet.insertRule(newAnim, sheet.cssRules.length);
} catch (e) {
console.warn("insertRule failed:", e.message);
}
更可靠的做法：用 CSS 自定义属性 + calc() 控制动画中间态
如果只是想动态调整位移量、缩放比、时长等数值，根本不需要碰 @keyframes。把可变参数抽成 --offset、--scale 等自定义属性，在关键帧里用 calc() 或直接引用即可。JS 只需改元素或 :root 的样式变量。
优势明显：
- 无需操作样式表，无跨域/权限问题
- 支持平滑过渡（配合
transition: --offset 0.3s） - 关键帧本身静态，兼容性好（Chrome 49+、Firefox 31+、Safari 9.1+）
- 调试直观：元素上 hover 查看 computed style 能看到实时变量值
/* CSS */
@keyframes moveX {
to { transform: translateX(calc(var(--dist, 100px))); }
}
.box { animation: moveX 0.5s ease-out; }
<p>/<em> JS </em>/
element.style.setProperty('--dist', '200px');</p>
用 Element.animate() 替代 CSS 动画做精细控制
当需要逐帧控制、暂停、反向、或根据用户交互实时调整关键帧数值时，Element.animate() 是更现代、更可控的选择。它返回一个 Animation 对象，可通过 .effect.updateTiming() 或直接改 .effect.getFrames() 后重新设置（注意：getFrames() 返回副本，需用 setKeyframes() 写回）。
注意点：
-
setKeyframes()在 Chrome 115+、Firefox 119+ 支持；旧版需重建 Animation - JS 动画不触发
animationstart等 CSS 事件，需监听onfinish或用currentTime判断 - 性能敏感场景下，大量
Element.animate()实例可能比 CSS 动画开销略高（但通常可忽略）
const anim = element.animate(
[{ transform: 'translateX(0)' }, { transform: 'translateX(100px)' }],
{ duration: 300 }
);
// 动态更新终点
anim.effect.setKeyframes([
{ transform: 'translateX(0)' },
{ transform: `translateX(${newX}px)` }
]);
关键帧参数真正要“动态”，得先想清楚：是批量配置多个动画的模板？还是单个元素响应式调整？前者适合自定义属性，后者优先考虑 Element.animate()。硬改 @keyframes 字符串容易漏掉作用域、拼写错误，还可能因 sheet 插入顺序引发竞态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
