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

  
.container outer
  .container inner, position: absolute
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: scenario 2s forwards
  
.container
  padding: 1rem
  display: inline-block
  background: white
  margin: 1rem
    
  .container
    position: absolute
    background: lightsalmon
    right: 0
    top: 0
    
    
@keyframes scenario
  to
    transform: translateX(100%)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.