CSS动画播放速度由animation-duration直接控制，值越小越快；JavaScript可通过element.style.animationDuration动态修改实现运行中变速，但仅限内联样式且不支持IE；Web Animations API的playbackRate支持真倍速但仅适用于JS创建的动画。
用 animation-duration 直接控制整体播放速度
HTML5 动画本身不提供“倍速播放”API，但 CSS 动画的播放速度完全由 animation-duration 决定——值越小，动画越快；越大则越慢。这不是“调节时间轴”，而是重设整个动画周期长度。
常见错误是试图用 JavaScript 修改 animation-play-state 或反复 toggle 来模拟变速，这只会暂停/恢复，无法真正改变速率。
-
animation-duration: 0.5s比默认2s快 4 倍 - 支持小数和单位：可写
150ms、3.75s - 若同时设置了
animation-iteration-count: infinite，变速后每轮时长同步变化 - 注意：该属性不触发重排（reflow），只影响重绘（repaint），性能开销低
用 JavaScript 动态修改 animation-duration 实现运行中变速
直接操作 style.animationDuration 是最轻量的运行时变速方式，无需重新定义 keyframes 或替换 class。
const el = document.querySelector('.spinner');
// 加速到 0.3 秒一圈
el.style.animationDuration = '0.3s';
// 减速到 4 秒一圈
el.style.animationDuration = '4s';
关键点：
立即学习“前端免费学习笔记（深入）”；
Smart Ledger
下载
智能收支追踪器 — 通过自然语言快速记账，自动分类，生成日/周/月报告和趋势分析。 支持中文自然语言输入("今天午饭花了35元")，数据本地JSON存储保护隐私。 适用于个人财务管理、预算追踪和消费分析场景。
- 必须用内联样式（
element.style.xxx）才能覆盖 CSS 中的声明，否则无效 - 如果原始动画通过 class 控制，需确保 class 中的
animation-duration可被内联样式优先级覆盖（默认可以） - 不支持 IE，但所有现代浏览器（Chrome/Firefox/Safari/Edge）均支持
- 避免高频设置（如 requestAnimationFrame 中每帧都改），会引起渲染抖动
用 animation-timing-function 调整“节奏感”，而非“速度”
很多人混淆“播放速度”和“运动节奏”。animation-timing-function（如 cubic-bezier(0.2, 0.8, 0.4, 1)）只改变动画在单个周期内的快慢分布（例如先慢后快），并不改变总时长。
典型误用场景：
- 想让淡入变快，却只调
ease-out→ 实际没提速，只是结尾更缓 - 用
steps(5, end)模拟逐帧动画 → 这是分段控制，不是变速 - 配合
animation-duration才有效：比如animation-duration: 1s; animation-timing-function: linear才是匀速 1 秒完成
Web Animations API 的 playbackRate 是真·倍速，但有兼容性限制
只有通过 element.animate() 创建的动画才支持 playbackRate 属性，这是目前唯一能实现类似视频倍速（如 2x、0.5x）的原生方案。
const anim = el.animate([
{ transform: 'rotate(0deg)' },
{ transform: 'rotate(360deg)' }
], {
duration: 2000,
iterations: Infinity
});
// 立即变为 1.5 倍速
anim.playbackRate = 1.5;
注意事项：
- 仅适用于 JS 创建的动画，CSS 定义的
@keyframes不支持该属性 - Firefox 和 Safari 对负值
playbackRate（倒播）支持不稳定，慎用 - Chrome 支持最好，但 iOS Safari 15.4+ 才完整支持
playbackRate设置 - 修改后动画会自动重同步起始位置，无需手动 reset
真正需要动态倍速控制时，别硬套 CSS 动画，老实用 element.animate() 启动并管理。
