input(type='checkbox', id='play')
label.play(for='play') Animation

.container rotate
View Compiled
html, body
  background: #111
  font-family: sans-serif

#play
  display: none

.play
  padding: 1rem
  color: white
  background: #666
  display: inline-block
  border-radius: 2px
  margin: 1rem
  cursor: pointer
  user-select: none

      

#play:checked
  ~ .play
    background: seagreen
  ~ .container
    animation-play-state: running
  
.container
  display: inline-block
  position: absolute
  top: 30%
  left: 30%
  padding: 1rem
  background: white
  margin: 1rem
  animation: scenario 4s infinite linear paused
    
    
@keyframes scenario
  from
    transform: rotate(0) translateX(100%) rotate(0)
  to
    transform: rotate(360deg) translateX(100%) rotate(-360deg)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.