通过 javascript 动态调整 animation.playbackrate 属性，可在不中断、不重置动画状态的前提下实时改变 css 动画播放速率，完美解决修改 animation-duration 导致的旋转位置突变问题。
通过 javascript 动态调整 animation.playbackrate 属性，可在不中断、不重置动画状态的前提下实时改变 css 动画播放速率，完美解决修改 animation-duration 导致的旋转位置突变问题。
在实现地球仪连续旋转效果时，一个常见需求是：默认以 20 秒一圈缓慢旋转，点击后瞬间加速至 2 秒一圈，并在 1 秒后恢复原速——但直接通过 CSS 类切换 animation-duration 会导致动画重置，出现明显的“跳帧”或位置回退现象。根本原因在于：修改 animation-duration 会触发浏览器重建动画实例，从而丢失当前播放进度（currentTime）。
正确的解决方案是复用并控制已运行的动画实例，利用 Web Animations API 提供的 playbackRate 属性进行实时变速：
✅ 推荐做法：使用 getAnimations() + playbackRate
function onGlobeClick() {
const globe = document.getElementById('globe');
// 获取当前正在运行的首个动画（即 rotate 动画）
const animation = globe.getAnimations().find(anim =>
anim.effect?.getTarget() === globe &&
anim.animationName === 'rotate'
);
if (animation) {
// 加速：20s → 2s 相当于播放速率 ×10
animation.playbackRate = 10;
// 1 秒后恢复常速（playbackRate = 1）
setTimeout(() => {
animation.playbackRate = 1;
}, 1000);
}
}
对应 CSS 只需定义一次 animation-duration（如 20s），无需 .fast 类及媒体查询式切换：
.globe {
width: 300px;
height: 300px;
background: url(https://web.archive.org/web/20150807125159if_/http://www.noirextreme.com/digital/Earth-Color4096.jpg);
border-radius: 50%;
background-size: 600px;
box-shadow: 0px 0px 15px 7px #fff4, inset 0px 0px 20px 7px #0008;
/* 单次声明，后续由 JS 控制速率 */
animation: rotate 20s linear infinite;
}
@keyframes rotate {
from { background-position: 0 0; }
to { background-position: 600px 0; }
}
⚠️ 注意事项
- getAnimations() 返回的是 Animation 对象数组，需确保获取到目标动画（推荐用 find() 精准匹配）；
- playbackRate 是倍数关系：1 为正常速度，10 表示快进 10 倍，0.5 表示半速；
- 该 API 在现代浏览器中广泛支持（Chrome 36+、Firefox 48+、Safari 13.1+、Edge 79+），旧版 Safari 可配合 -webkit- 前缀或降级处理；
- 不要混用 animation-duration 切换与 playbackRate —— 后者应作为唯一变速手段。
✅ 效果保障
由于 playbackRate 仅影响时间缩放，动画的 currentTime、播放状态（running）、关键帧插值均保持连续，因此地球仪旋转位置平滑过渡，无任何视觉跳变，真正实现「无缝加速」。
此方法不仅适用于背景图位移旋转，也适用于 transform: rotate()、opacity 等任意 CSS 动画属性，是构建高性能、高体验交互动画的核心技巧之一。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
