如何在CSS旋转动画中修改animation-duration并保持旋转连续

问题原因 #

修改animation-duration时，浏览器会重置动画的初始状态，导致背景位置突然跳转到新时长对应的起始进度点，破坏了旋转的连续性。

解决方案 #

改用JavaScript的requestAnimationFrame直接控制背景位置偏移量，完全由代码掌控旋转进度，切换速度时自然保持位置连续，彻底避免跳变。

修改后的代码 #

HTML #

<div id='globe' class='globe'></div>

CSS #

body {
  background-color: #000;
}

.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;
    cursor: pointer;
}

JavaScript #

const globe = document.getElementById('globe');
let currentX = 0;
// 正常速度：20秒完成600px偏移，对应每帧(约16.67ms)移动0.5px
let speed = 0.5;
let animationId;

function rotateGlobe() {
    currentX += speed;
    // 偏移量达到背景宽度后重置，实现无限循环
    if (currentX >= 600) {
        currentX = 0;
    }
    globe.style.backgroundPosition = `${currentX}px 0px`;
    animationId = requestAnimationFrame(rotateGlobe);
}

// 启动旋转动画
rotateGlobe();

globe.addEventListener('click', () => {
    // 切换到快速旋转：2秒完成600px偏移，每帧移动5px
    speed = 5;
    // 1秒后恢复正常转速
    setTimeout(() => {
        speed = 0.5;
    }, 1000);
});

代码说明 #

• 用requestAnimationFrame持续更新地球的背景位置，旋转进度完全由JS控制，不存在CSS动画重置的问题。
• 点击地球时直接修改speed变量切换旋转速度，所有偏移基于当前位置累加，自然保持旋转连续性。
• 通过判断偏移量是否达到背景图宽度，实现无限循环旋转效果。

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