如何通过切换类按钮实现动画播放/暂停？现有代码无法生效求指导

以下是几个关键修复点：

1. 修复CSS语法错误 #

你的CSS代码在大括号结尾多了一个冗余分号，虽多数浏览器能容错，但可能导致样式解析异常：

/* 错误写法 */
.mysun, .mysky   {
  animation-play-state: paused;
};

/* 正确写法 */
.mysun, .mysky {
  animation-play-state: paused;
}

2. 提升CSS选择器优先级 #

如果#sun和#sky的动画样式直接写在ID选择器中，ID选择器优先级（权重100）会高于类选择器（权重10），导致类样式被覆盖。可以通过组合选择器提升优先级：

#sun.mysun, #sky.mysky {
  animation-play-state: paused;
}

3. 修复JS按钮元素获取逻辑 #

直接使用btn.onclick可能因变量未定义报错，需先正确获取按钮元素：

const btn = document.getElementById("btn");
btn.onclick = myFunction;

function myFunction() {
  const sun = document.getElementById("sun");
  const sky = document.getElementById("sky");
  sun.classList.toggle("mysun");
  sky.classList.toggle("mysky");
}

4. 确认动画基础配置完整性 #

确保#sun和#sky已定义完整的动画属性，示例如下：

#sun {
  animation: sunMove 10s linear infinite;
}

#sky {
  animation: skyChange 10s linear infinite;
}

@keyframes sunMove {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

@keyframes skyChange {
  from { background-color: lightblue; }
  to { background-color: darkblue; }
}

完成以上修改后，点击按钮即可通过切换类实现动画播放/暂停的控制。

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