<input id="trigger" class="toggle-checkbox" type="checkbox"><label for="trigger">Fire!</label>

<div class="zwrap">
<div class="z">
  <div class="pow">BANG</div>
</div>
  <hr>
</div>

<div class="logo"><a href="https://undead.institute" target="_blank"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1804713/UndeadInsti-LogoOnWhite.png" alt="Getting Braaains should be fun"></a></div>

.toggle-checkbox:checked ~ .zwrap .z { 
  animation: 0.05s steps(3, end) 0s shoot forwards;
}

@keyframes shoot {
  from {
    background-position: 0;
  }
  to {
    background-position: -630px;
  }
}
input:checked ~ .zwrap .pow {
  animation: 2s linear 0.1s pow forwards;
}
.pow {
  font-family: Verdana, sans-serif;
  border-radius: 50%;
  width: 40px;
  height: 30px;
  padding-top: 10px;
  color: #FFF;
  text-align: center;
  background-color: hsla(0, 0%, 50%, 1);
  box-shadow: 12px 12px 0 hsla(0, 0%, 50%, 0.5), 7px 7px 0 hsla(0, 0%, 50%, 0.5), 12px -12px 0 hsla(0, 0%, 50%, 0.5), 7px -7px 0 hsla(0, 0%, 50%, 0.5), -12px 12px 0 hsla(0, 0%, 50%, 0.5), -7px 7px 0 hsla(0, 0%, 50%, 0.5), -12px -12px 0 hsla(0, 0%, 50%, 0.5), -7px -7px 0 hsla(0, 0%, 50%, 0.5), 24px 0 0 hsla(0, 0%, 50%, 0.5), -24px 0 0 hsla(0, 0%, 50%, 0.5), 18px -7px 0 hsla(0, 0%, 50%, 0.5), -18px -7px 0 hsla(0, 0%, 50%, 0.5), 18px 7px 0 hsla(0, 0%, 50%, 0.5), -18px 7px 0 hsla(0, 0%, 50%, 0.5);
  position: absolute;
  top: 0;
  transform: translate(20px, 240px);
  opacity: 0;
}
@keyframes pow {
  0% {
    opacity: 0;
  }
  7% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.toggle-checkbox:checked ~ .zwrap { 
  animation: 1s linear 1.5s fall forwards;
}
.zwrap {
  width: 100vw;
  height: 100vh;
  transform-origin: center 80%;
  transform: rotate(0);
  
}

@keyframes fall {
  0% {
    transform: rotate(0deg);
  }
  5% {
    transform: rotate(1deg);
  }
  85% {
    transform: rotate(-87deg);
  }
  95% {
    transform: rotate(-89deg);
  }
  80%, 90%, 100% {
    transform: rotate(-90deg);
  }
}
.z {
  width: 210px;
  height: 394px;
  margin: auto;
  background-image: url("https://assets.codepen.io/1804713/cowboyshooting.png");
}
hr {
  border: 1px solid darkgoldenrod;
  margin-top: -1em;
  position: relative;
  z-index: -1;
}
body {
  background-color: tan;
  overflow: hidden;
}

.logo {
  width: 100%;
  max-width: 400px;
  position: absolute;
  top: 0;
  right: 0;
}
.logo img {
  width: 100%;
}
input{
  display: none;
}
input:checked + label {
  box-shadow: inset 3px 3px 2px #660000;
  transform: translate(3px, 3px);
}
label {
  font-size: 1.5em;
  color: #FFF;
  background-color: #960B0B;
  width: 140px;
  height: 30px;
  text-align: center;
  font-weight: bold;
  display: block;
  border-radius: 7px;
  box-shadow: 3px 3px 0 #660000;
  cursor: pointer;
}