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

.container.a
  .inner z-index
.container
  .inner without z-index
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
  ~ .a
    animation: scenario 1s forwards

.container
  display: block
  margin: 1rem
  padding: .25rem

  .inner
    background: lightsalmon
    padding: 1rem
    position: absolute
 
.a .inner
  background: #358
  color: white
  z-index: 1
    
@keyframes scenario
  to
    opacity: 0

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.