<input id="input1" type="checkbox"></input>
<label for="input1">Click me</label>
<input id="input2" type="checkbox"></input>
<label for="input2">Click me</label>
<div></div>
div {
  position: absolute;
  top: 50px;
  height: 100px;
  width: 100px;
  background-color: red;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#input1:checked ~ div {
   animation: spin 0.5s 1 0s;
}

#input2:checked ~ div {
   animation: spin 50s 1 0s;
}



External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.