如何使用JavaScript触发已暂停的CSS动画，实现角色死亡时游戏画面渐变灰度

你的代码存在3个核心错误导致动画无法触发：

• 混淆了@keyframes动画名和DOM元素ID。deathAnimation是你定义的CSS动画名称，不是页面中HTML元素的ID，document.getElementById("deathAnimation")会返回null，后续所有针对该对象的操作均无效。
• 执行了错误的类添加操作。你已经在CSS规则中提前给#game绑定了deathAnimation动画，不需要额外给game元素添加不存在的类。
• 动画播放状态的设置对象错误。animation-play-state是绑定在#game元素上的CSS属性，需要直接修改game元素的该属性，而非修改不存在的deathAnimation元素的属性。

首先删除JS代码中这两行无效定义：

const deathAnimation = document.getElementById("deathAnimation")
const game = document.getElementById("game")

再将死亡判定分支的代码修改为以下内容：

if (dead == true) {
    clearInterval(gameLoop)
    document.getElementById("youDied").innerHTML = "YOU DIED"
    document.getElementById("playAgain").innerHTML = "Play Again?" 
    // 直接修改game元素的动画播放状态即可触发动画
    document.getElementById("game").style.animationPlayState = "running"
}

如果希望灰度效果在动画结束后持续保留，不会自动恢复为彩色，需要给#game的CSS规则新增animation-fill-mode: forwards;属性：

#game {
    width: 600px;
    height: 300px;
    border: 2px solid black;
    margin: auto;
    background-image: url("https://t3.ftcdn.net/jpg/01/73/79/26/360_F_173792623_516juhwjkCCZJ9OyesyH7hf7r9zsyH5u.jpg");
    background-size: cover;
    animation: deathAnimation 2s;
    animation-play-state: paused;
    /* 新增下方属性，让动画停在最后一帧 */
    animation-fill-mode: forwards;
}

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