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

.container Triggers paint. Not cool.
View Compiled
html, body
  background: #111
  font-family: sans-serif
  // height: 100%

#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: scenario 10s ease infinite alternate
  
.container
  display: inline-block
  padding: 1rem
  margin: 1rem
  background: white
  width: 400px
  background: linear-gradient(270deg, tomato, crimson, purple, salmon)
  background-size: 500% 100%
  color: white
  
  
    
    
@keyframes scenario
  0%
    background-position: 0% 50%
  50%
    background-position: 100% 50%
  100%
    background-position: 0% 50%
    

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.