如何用CSS animation-play-state点击按钮控制独立元素动画播放暂停

方案1：兼容性最优方案（仅修改少量HTML结构，支持全版本浏览器） #

核心思路是用隐藏的复选框存储点击状态，用label元素伪装成按钮，点击label切换复选框的选中状态，再通过兄弟选择器控制#stage的动画状态。

完整代码 #

HTML代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <!-- 隐藏的复选框，用于存储切换状态 -->
    <input type="checkbox" id="toggle-animation" hidden>
    <!-- 用label伪装成按钮，关联复选框 -->
    <label class="button" for="toggle-animation">play/pause</label>
    <div id="stage"></div>
  </body>
</html>

CSS代码

#stage {
  height:300px;
  border:1px solid #000;
  animation:stage-change 6s 6 forwards;
  overflow: hidden;
  /* 默认动画暂停，需要默认播放可改为running */
  animation-play-state: paused;
}

@keyframes stage-change {
  0% {
    background-color: darkorange ;
  }
  100% {
    background-color: #1c1341;
  }
}

/* 复选框选中时，动画播放，默认需要播放的话此处改为paused即可 */
#toggle-animation:checked ~ #stage {
  animation-play-state: running;
}

/* 给label加原生按钮一致的样式 */
.button {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #f0f0f0;
  cursor: pointer;
  margin-bottom: 10px;
  user-select: none;
}
.button:active {
  background: #e0e0e0;
}

方案2：几乎不修改原有HTML结构（现代浏览器支持） #

核心思路是使用CSS :has() 伪类，配合HTML原生popover切换状态实现，仅需给原有按钮加一行属性，支持Chrome 105+、Firefox 121+、Safari 15.4+版本浏览器。

完整代码 #

HTML代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <!-- 仅新增popovertarget属性关联状态容器 -->
    <button class="button" id="start" popovertarget="toggle-pop">play/pause</button>
    <!-- 隐藏的空popover元素，用于存储点击切换状态 -->
    <div id="toggle-pop" popover hidden></div>
    <div id="stage"></div>
  </body>
</html>

CSS代码

#stage {
  height:300px;
  border:1px solid #000;
  animation:stage-change 6s 6 forwards;
  overflow: hidden;
  /* 默认动画暂停，需要默认播放可改为running */
  animation-play-state: paused;
}

@keyframes stage-change {
  0% {
    background-color: darkorange ;
  }
  100% {
    background-color: #1c1341;
  }
}

/* popover处于打开状态时，播放动画，默认需要播放的话此处改为paused即可 */
body:has(#toggle-pop:popover-open) #stage {
  animation-play-state: running;
}

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