Making a css function run after clicking a button WITHOUT Javascript

Question

I need to make a dice start/stop rolling on the click of a button but I cannot use any JavaScript. Right now it just runs infinitely. CSS/HTML only, thank you.

<!DOCTYPE html>
 <html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
    .dice { /* HTML symbols */
        font-size: 100px;
        font-weight: 800;
    }

    .dice::after {
        content:'';
        animation: rolling 6s linear infinite;
    }

    @keyframes rolling {
        0% {content:'\2680';}
        20% {content:'\2681';}
        40% {content:'\2682';}
        60% {content:'\2683';}
        80% {content:'\2684';}
        100% {content:'\2685';}
    }
</style>
</head>
<body>

<span class="dice"></span>

</body>
</html>

ray · Answer 1 · 2020-03-29T22:58:05.260

You can hide a checkbox and define a sibling selector that changes the animation-play-state:

.dice {
  /* HTML symbols */
  font-size: 100px;
  font-weight: 800;
}

.dice::after {
  content: '';
  animation: rolling 6s linear infinite;
}

/* set play state to paused when the checkbox is checked*/
input:checked~.dice::after {
  animation-play-state: paused;
}

input {
  opacity: 0;
  position: absolute;
}

.button {
  background: #0099ff;
  color: white;
  display: inline-block;
  border-radius: 4px;
  font-weight: bold;
  font-family: sans-serif;
  padding: .25em 1em;
}

@keyframes rolling {
  0% {content: '\2680';}
  20% { content: '\2681';}
  40% { content: '\2682'; }
  60% { content: '\2683'; }
  80% { content: '\2684'; }
  100% { content: '\2685'; }
}

<label>
  <input type="checkbox" />
  <span class="dice">
  </span>
  <div class="button">Fake Button</div>
</label>

score 0 · Answer 2 · answered Mar 29 '20 at 22:56

Use a hidden <input type="radio" id="roll" hidden> button
a <label> element with for="roll"
Use the :checked pseudo and the Adjacent sibling combinator +

.dice {
  font-size: 100px;
  font-weight: 800;
}


#roll:checked + .dice::after {
  content:'';
  animation: rolling 6s linear 0s infinite;
}

@keyframes rolling {
  0%   {content:'\2680';}
  20%  {content:'\2681';}
  40%  {content:'\2682';}
  60%  {content:'\2683';}
  80%  {content:'\2684';}
  100% {content:'\2685';}
}

<label for="roll">Click to start rolling roll infinitely</label><br>

<input type="radio" id="roll" hidden>
<span class="dice"></span>

Making a css function run after clicking a button WITHOUT Javascript

2 Answers2