body {
  overflow: hidden;
  background: dodgerblue 75%);
}

.box1 input[type="checkbox"] {
  display: none;
}

.box1 label {
  display: flex;
  width:100px;
  height:100px;
  border-radius: 55px;
  font-size: 70px;
  margin:20px;
  color:#FFF;
  background:#0091EA;
  justify-content: center;
  align-items: center;
  animation: animName .75s linear infinite paused;
}
 

.box1 input[type="checkbox"]:checked + label{
  animation-play-state: running;
  
}

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

body {
  overflow: hidden;
  background: #9F0 75%);
  
}

.box2 input[type="checkbox"] {
  display: none;
}

.box2 label {
  display: flex;
  width:100px;
  height:100px;
  border-radius: 55px;
  font-size: 70px;
  margin:20px;
  color:#FFF;
  background:#6CC;
  justify-content: center;
  align-items: center;
  animation: animName .75s linear infinite paused;
}
 

.box2 input[type="checkbox"]:checked + label{
  animation-play-state: running;
  
}

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