如何实现按住任意键启动动画、松开按键暂停动画？

需求说明 #

我需要实现一个“旋转小球”动画效果：

• 仅在按住任意按键时动画运行，松开按键则暂停
• 动画需循环播放而非仅运行一次
  目前我的代码仅支持通过Q键控制动画，不会使用jQuery，作为JavaScript新手不清楚现有代码缺少哪些部分。

修改后的完整代码 #

HTML #

<div class="linje">
    <div id="ball">
        <p id="roter">161519</p>
    </div>
</div>

CSS #

.linje{
    width: 1000px;
    height: 500px;
}

#ball{
    position: relative;
    top: 40px;
    left: 0;
    width: 100px;
    height: 100px;
    background-color: rgb(114, 240, 214);
    border-radius: 50%;
    animation: rulle 4s linear infinite paused;
    text-align: center;
    line-height: 100px;
}

@keyframes rulle {
    0%{
        top: 40px;
        left: 0;
        transform: rotate(0deg);
    }
    12.5%{
        top: 40px;
        left: 50px;
        transform: rotate(45deg);
    }
    25%{
        top: 40px;
        left: 100px;
        transform: rotate(90deg);
    }
    37.5%{
        top: 40px;
        left: 150px;
        transform: rotate(135deg);
    }
    50%{
        top: 40px;
        left: 200px;
        transform: rotate(180deg);
    }
    62.5%{
        top: 40px;
        left: 250px;
        transform: rotate(225deg);
    }
    75%{
        top: 40px;
        left: 300px;
        transform: rotate(270deg);
    }
    87.5%{
        top: 40px;
        left: 350px;
        transform: rotate(315deg);
    }
    100%{
        top: 40px;
        left: 400px;
        transform: rotate(360deg);
    }
}

#roter{
    animation: roter 4s linear infinite paused;
}

@keyframes roter {
    0%{
        transform: rotate(0deg);
    }
    25%{
        transform: rotate(90deg);
    }
    50%{
        transform: rotate(180deg);
    }
    75%{
        transform: rotate(270deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

JavaScript #

const ball = document.querySelector("#ball");
const roter = document.querySelector("#roter");

// 按住任意键启动动画
window.addEventListener("keydown", () => {
    ball.style.animationPlayState = "running";
    roter.style.animationPlayState = "running";
});

// 松开任意键暂停动画
window.addEventListener("keyup", () => {
    ball.style.animationPlayState = "paused";
    roter.style.animationPlayState = "paused";
});

关键修改说明 #

• 添加keyup事件监听：补充按键松开的处理逻辑，实现“松开即暂停”的效果
• 移除按键判断：删除原代码中仅Q键触发的限制，改为任意按键都能控制动画
• 添加infinite动画属性：在CSS的animation声明中加入infinite，让动画循环播放而非仅运行一次
• 修复CSS语法错误：修正rulle动画中left:250缺少px的问题，调整100%状态的left值让移动路径更连贯
• 优化状态控制方式：直接修改animationPlayState属性，避免重新设置整个animation导致动画重置

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