css 点击时的动画播放状态

Question

如何在单击按钮时使用 CSS（非 JS）中的动画播放状态属性 pause/play 舞台变换动画？我在 Internet 上找到的所有内容都是单击同一个元素或该元素的父元素，而不是两个单独的元素。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <button  class="button" id="start">play/pause</button>
    <div id="stage"></div>
  </body>
</html>

#stage {
  height:300px;
  border:1px solid #000;
  animation:stage-change 6s 6  forwards;
  overflow: hidden;
}

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

Answer 1

您可以使用 ~ 来更改元素兄弟属性的更改 css。

假设你想在 css 中完全做到这一点，你不能真正让按钮同时播放和暂停，你可以为单个按钮使用 JS。

我在这里使用了 2 个按钮，一个用于播放，一个用于暂停。

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <button  class="button" id="play">play</button>
    <button  class="button" id="pause">pause</button>
    <div id="stage"></div>
  </body>
</html>

CSS

#stage{
    height:300px;
    border:1px solid #000;
    overflow: hidden;
    animation: stage-change 6s 6  forwards;
    animation-play-state: paused;
}

@keyframes stage-change {
0% {
    background-color: darkorange ;
}
100% {
    background-color: #1c1341;
}
}
#play:focus ~ #stage{
    animation-play-state: running;
}
#pause:focus ~ #stage{
    animation-play-state: paused;
}

或

如果您真的只想使用一个输入元素来控制动画，您可以使用复选框 hack。

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <input type="checkbox" id="check"> play
    <div id="stage"></div>
  </body>
</html>

CSS

#stage{
    height:300px;
    border:1px solid #000;
    overflow: hidden;
    animation: stage-change 6s 6  forwards;
    animation-play-state: paused;
}

@keyframes stage-change {
0% {
    background-color: darkorange ;
}
100% {
    background-color: #1c1341;
}
}
#play:checked ~ #stage{
    animation-play-state: running;
}

Answer 2

如果您将按钮替换为复选框并设置按钮的样式，则可以实现您的任务：

/* Styling for the button */
.button {
  display: inline-block;
  padding: 2px 7px;
  border: 1px solid #767676;
  border-radius: 3px;
  box-sizing: border-box;
  font: normal 13.3333px sans-serif;
  background-color: #efefef;
  user-select: none;
}
.button:hover { border-color: #474747; background-color: #e3e3e3; }
.button:active { border-color: #8c8c8c; background-color: #f5f5f5; }

/* Control element */
#start {
  position: absolute;
  height: 1px; width: 1px;
  opacity: 0; pointer-events: none;
}

/* Controllable element */
#stage {
  height: 300px; border: 1px solid #000;
  animation: stage-change 6s 6 forwards paused;
}
#start:checked + #stage { animation-play-state: running; }

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

<label for="start" class="button">play/pause</label>
<input id="start" type="checkbox">
<div id="stage"></div>

可以通过在标记中使用真正的按钮来简化样式：

/* Button */
.button { pointer-events: none; }

/* Control element */
#start {
  position: absolute;
  height: 1px; width: 1px;
  opacity: 0; pointer-events: none;
}

/* Controllable element */
#stage {
  height: 300px; border: 1px solid #000;
  animation: stage-change 6s 6 forwards paused;
}
#start:checked + #stage { animation-play-state: running; }

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

<label for="start"><button class="button">play/pause</button></label>
<input id="start" type="checkbox">
<div id="stage"></div>

或者您可以进一步扩展功能 - 按钮上的标签会发生变化：

/* Styling for the button */
.button {
  display: inline-block;
  padding: 2px 7px;
  border: 1px solid #767676;
  border-radius: 3px;
  box-sizing: border-box;
  font: normal 13.3333px sans-serif;
  background-color: #efefef;
  user-select: none;
}
.button:hover { border-color: #474747; background-color: #e3e3e3; }
.button:active { border-color: #8c8c8c; background-color: #f5f5f5; }
.button::before { content: 'play'; }
#start:checked + .button::before { content: 'pause'; }

/* Control element */
#start {
  position: absolute;
  height: 1px; width: 1px;
  opacity: 0; pointer-events: none;
}

/* Controllable element */
#stage {
  height: 300px; border: 1px solid #000;
  animation: stage-change 6s 6 forwards paused;
}
#start:checked + label + #stage { animation-play-state: running; }

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

<input id="start" type="checkbox">
<label for="start" class="button"></label>
<div id="stage"></div>

css 点击时的动画播放状态

css animation-play-state on click

html

css

animation

css-animations