CodePen Embed - Pause CSS animation

<input type="checkbox" id="rotate">
<label for="rotate">Rotate</label>

<div class="my-element"></div>

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

.my-element {
    animation: rotating 10s infinite linear;
    animation-play-state: paused;
  
    width: 50px;
    height: 50px;
    background-color: #a242f6;
    margin: 4rem;
}

#rotate:checked ~ .my-element {
    animation-play-state: running;
    border: 1px solid red;
}

This Pen is owned by Rupert Angermeier on CodePen.

See more by @rangermeier on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.