[SOLVED] css animation-play-state on click

css animation-play-state on click

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

Solution

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