css animation-play-state on click-CodePudding

How can I pause/play the stage-change animation using the animation-play-state property in CSS (NOT JS), on clicking the button? Everything I find on the internet is clicking on the same element or the parent of that element, and not two separate elements.

<!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;
  }
}

CodePudding user response：

If you replace the button with a checkbox and set the styles as for the button, then you can implement your task:

Show code snippet

/* 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>

It is possible to simplify the styles by using a real button in the markup:

Show code snippet

/* 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>

Or you can further expand the functionality - the labels on the button will change:

Show code snippet

/* 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>

CodePudding user response：

You can use the ~ to change properties of changing css of the element's sibling.

Assuming you want to totally do it in css, you can't really make the button play & pause at the same time, you can use JS for a single button.

I have done it using 2 buttons here, one button for playing & one for pausing.

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;
}

You can use the checkbox hack, if you really just want to use one input element to control the animation.

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;
}