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



<div class="z">
  <svg id="hat" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 131 103"><path fill="#efefef" d="M9.9 15.7H0V0h130.8v15.7h-10.1l.1 87.2H9.8V15.7z"/><path id="hole" d="M95.4 31.2h1.4v8.5h-1.4v1.4H87v-1.4h-1.4v-8.5h1.4v-1.4h8.5v1.4z"/></svg>
 
  <svg id="chef" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-linecap="square" stroke-miterlimit="1.5" clip-rule="evenodd" viewBox="0 0 220 420"><g transform="matrix(-1.12143 0 0 1.12143 215.3 47)"><path fill="#222" d="M35.5 299h18.2v-12.8h36l.3 12.4v34H35.5v-33.5zM152.3 299.1h-18.2v-22.6h-36l-.3 22.2v34h54.5V299z"/><path fill="#9cd3b3" fill-rule="nonzero" d="M26 273.5h18v-9h9.1v-27.2h-9V228H16.8v9.3h-9v18.6h9v8.6h9v9zM143.2 236.4h-11.5v18.2h3v9h9v9h18.2v-9h9v-9h9v-18.2h-9v-9h-27.7v9z"/><path fill="#fff" d="M25.8 155.2h-8.5v9.1h-9v9H-.8l-.5 72.2h19.5v-8.9l8.9.2v-9.3H36v-36.4h8v-8.7h6.6l-.8 43.6H53v12.7H53V293l37 .2.3-33H97l.7 32.9 37-.1v-54.3h-.2v-12.2h3.7v-44.3l5.4.2v8.9h9v36h9.1v9h9v9.2H189V173h-9v-9h-9.1v-9.1h-9v-9l-45.4-.2H25.8v9.5z"/><path fill="#4d4c4c" fill-rule="nonzero" d="M53 234h81.8v9H53z"/><path fill="#91c1a3" fill-rule="nonzero" d="M72.5 127.7H119v25.2H72.5z"/><path fill="#9cd3b3" fill-rule="nonzero" d="M137 66.6h18V94h-9.5v26.5h-8.6v9h-8.3v9h-18.2v9H82.9v-9H65v-9.2h-9v-8.8h-9V94h-9V66.6h18v-18h9v-9h63.7v9h8.3v18z"/><path id="hair" fill="#4f2e13" d="M844 534h-40.5V512h20V491h.6v-18.8h40.6v19.6h20.8v-19.6H926V491h.6V512h20V534h-40.5v-21.1h-.5v.8h-60.8v-.8h-.8v21z" transform="matrix(-.44383 0 0 .44383 484.9 -116)"/><path fill="#758b7c" fill-rule="nonzero" d="M91.8 111.5h9.1v9h-9.1z"/><path fill="#91c1a3" fill-rule="nonzero" d="M92 75.6h9v26.7h-9z"/><path id="hair1" fill="#4f2e13" fill-rule="nonzero" d="M853.3 247.1v91.3l-21.3.4v-91.7h21.3zm-213.3 0v86.2h-21.4v-86.2H640zm21.3-42.6V183h149.4v21.4H832V247h-21.3v-21.3h-85.4v-.3.3h-64v21.3H640v-42.6h21.3z" transform="matrix(-.42179 0 0 .42179 406.9 -55.7)"/><path fill="#fbeb8e" fill-rule="nonzero" d="M131.1 85H101V57.6h30.2V85zM65 57.6h27v27h-.2v.4H65V57.6z"/><path fill="#444445" fill-rule="nonzero" d="M83.4 66.8h9v9h-9zM101.1 75.9h9V85h-9z"/><path fill="none" stroke="#c9c9c9" stroke-width="6.242039999999999" d="M72.5 231v-66.5H119"/><path fill="#9a9a9a" d="M87.9 173.7h-6.5v6.5h6.5zM87.9 192.3h-6.5v6.5h6.5zM87.9 210.8h-6.5v6.5h6.5z"/></g>
    <g id="rat" transform="matrix(.86326 0 0 .86326 18 -4.2)"><path fill="#a4a4a4" d="M121.2 146.5H91v-12.7h.4v-.7h.4v-.7h.5v-.9h1v-6.9h1.9V122H117v2.6h2v7h1v.8h.5v.7h.3v.7h.4v12.7z" transform="matrix(1.307 0 0 1.68005 -32.3 -145.7)"/><path fill="#b8b8b8" d="M12 60h.8v15.7H8.2V60.1H9v-1h3v1z" transform="matrix(1.30634 -.0533 .04146 1.6792 67.5 -26.3)"/><path fill="#b8b8b8" d="M12 60h.8v15.7H8.2V60.1H9v-1h3v1z" transform="matrix(-1.30634 -.0533 -.04146 1.6792 145.5 -26.3)"/><path fill="#4f2e13" d="M104.1 71.2h3v16.6h-3z" transform="matrix(1.15839 0 0 .70469 -24.7 44.7)"/><path fill="#4f2e13" d="M104.1 71.2h3v16.6h-3z" transform="matrix(-1.15839 0 0 .70469 238 44.7)"/><path fill="#4f2e13" d="M104.1 71.2h3v16.6h-3z" transform="matrix(1.15839 0 0 .70469 -23.5 37.3)"/><path fill="#4f2e13" d="M104.1 71.2h3v16.6h-3z" transform="matrix(-1.15839 0 0 .70469 236.8 37.3)"/><path fill="#4f2e13" d="M104.1 71.2h3v16.6h-3z" transform="matrix(1.15839 0 0 .50853 -21 50.1)"/><path fill="#4f2e13" d="M104.1 71.2h3v16.6h-3z" transform="matrix(-1.15839 0 0 .50853 234.3 50.1)"/><path fill="#b8b8b8" d="M12 60h.8v15.7H8.2V60.1H9v-1h3v1z" transform="matrix(1.28433 -.24237 -.26965 -1.4289 102.4 178.7)"/><path fill="#b8b8b8" d="M12 60h.8v15.7H8.2V60.1H9v-1h3v1z" transform="matrix(-1.28433 -.24237 .26965 -1.4289 110.7 178.7)"/><path fill="#4f2e13" d="M104.1 71.2h3v16.6h-3z" transform="matrix(.65442 0 0 .3623 33 57)"/><path fill="#4f2e13" d="M104.1 71.2h3v16.6h-3z" transform="matrix(-.65442 0 0 .3623 180.3 57)"/><path fill="#c58383" d="M8.8 62h.7v1.4h-.7z" transform="matrix(1.30634 -.0533 .04146 1.6792 67.5 -26.3)"/><path fill="#c58383" d="M8.8 62h.7v1.4h-.7z" transform="matrix(4.47884 -.18274 .05564 2.25349 39.8 -57.3)"/><path fill="#c58383" d="M8.8 62h.7v1.4h-.7z" transform="matrix(-4.47884 -.18274 -.05357 2.16965 173 -52)"/><path fill="#c58383" d="M8.8 62h.7v1.4h-.7z" transform="matrix(-1.30634 -.0533 -.04146 1.6792 145.5 -26.3)"/><path fill="#c58383" d="M8.8 62h.7v1.4h-.7z" transform="matrix(1.30634 -.0533 .04146 1.6792 68.6 -28.9)"/><path fill="#c58383" d="M8.8 62h.7v1.4h-.7z" transform="matrix(-1.30634 -.0533 -.04146 1.6792 144.3 -28.9)"/><path fill="#c58383" d="M8.8 62h.7v1.4h-.7z" transform="matrix(1.30634 -.0533 .04146 1.6792 69.9 -29)"/><path fill="#c58383" d="M8.8 62h.7v1.4h-.7z" transform="matrix(-1.30634 -.0533 -.04146 1.6792 143 -29)"/><path fill="#c58383" d="M8.8 62h.7v1.4h-.7z" transform="matrix(1.30634 -.0533 .04146 1.6792 71.2 -26.5)"/><path fill="#c58383" d="M8.8 62h.7v1.4h-.7z" transform="matrix(-1.30634 -.0533 -.04146 1.6792 141.8 -26.5)"/><path fill="#a4a4a4" fill-rule="nonzero" d="M0-48.8v73h73v-73H0z" transform="matrix(0 .43242 -.52215 0 100.3 30.5)"/><path fill="#a4a4a4" fill-rule="nonzero" d="M0-48.8v73h73v-73H0z" transform="matrix(0 .26826 -.26008 0 84.5 20.9)"/><path fill="#c58383" d="M1462.4 604.5h18.7v19.2h-18.7z" transform="matrix(.50885 0 0 .50885 -661.2 -281.7)"/><path d="M1487.3 614.1h9.3v9.3h-9.3z" transform="matrix(.50885 0 0 .50885 -652 -264.7)"/><path fill="#a4a4a4" fill-rule="nonzero" d="M0-48.8v73h73v-73H0z" transform="matrix(0 .26826 -.26008 0 122.5 20.9)"/><path fill="#c58383" d="M1462.4 604.5h18.7v19.2h-18.7z" transform="matrix(.50885 0 0 .50885 -623.4 -281.4)"/><path fill="none" stroke="#000" stroke-linecap="butt" stroke-linejoin="round" stroke-width=".71239" d="M108.9 48.7h4.2l3.6-3.7M105.5 48.7h-4.2L97.7 45M108.9 51.7h4.2l3.6 3.6M105.5 51.7h-4.2l-3.6 3.6M108.9 50.1h10.8M105.5 50.1H94.7"/><path fill="#fff" stroke="#cf9999" stroke-linecap="round" stroke-linejoin="round" stroke-width=".1" d="M21 35.3h.8V38H21v.7h-2.6v-.7h-.7v-2.6h.7v-.7h2.6v.7z" transform="matrix(1.7055 0 0 1.7055 67.5 -25.5)"/><path fill="#fff" stroke="#cf9999" stroke-linecap="round" stroke-linejoin="round" stroke-width=".1" d="M21 35.3h.8V38H21v.7h-2.6v-.7h-.7v-2.6h.7v-.7h2.6v.7z" transform="matrix(1.7055 0 0 1.7055 78.4 -25.5)"/>
      <path id="lteye" d="M21 35.3h.8V38H21v.7h-2.6v-.7h-.7v-2.6h.7v-.7h2.6v.7z"/>
      <path id="rteye" d="M21 35.3h.8V38H21v.7h-2.6v-.7h-.7v-2.6h.7v-.7h2.6v.7z"/><path d="M102.6 56.6h2V58h-2z"/></g></svg>
</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 ~ .z #hat { 
  animation: 0.25s linear 0.04s shootoffhat forwards;
}
.toggle-checkbox:checked ~ .z #hole { 
  animation: 0.01s linear 0s appear forwards;
}
@keyframes appear {
  from {opacity: 0;}
  to {opacity: 1;}
}
#hole {
  opacity: 0;
  transform: translate(-20px, 20px);
}
@keyframes shootoffhat {
  0% {
    transform: rotateY(0) rotateX(0) translateY(0);
  }
  100% {
    transform: rotate(180deg) translateY(100vh);
  }
}
#hat {
  margin: 0 55px -9em;
  position: relative;
  z-index: 10;
  transform: rotate(0) translateY(0);
  transform-origin: center 50px;
  width: 180px;
}
.toggle-checkbox:checked ~ .z #rteye { 
  animation: 0.5s linear 2s dilater forwards;
}
.toggle-checkbox:checked ~ .z #lteye { 
  animation: 0.5s linear 2s dilatel forwards;
}
@keyframes dilater {
  from {transform: translate( 92.25px, 0.25px ) scale(1);}
  to {transform: translate( 70px, -1px ) scale(0.75);}
}
@keyframes dilatel {
  from {transform: translate( 81.25px, 0.25px ) scale(1);}
  to {transform: translate( 59px, -1px ) scale(0.75);}
}
#lteye {
  transform-origin: 50% 10%;
  transform: translate( 81.25px, 0.25px ) scale(1);
}
#rteye {
  transform-origin: 50% 10%;
  transform: translate( 92.25px, 0.25px ) scale(1);
}
.z {
  width: 300px;
  margin: auto;
}
.toggle-checkbox:checked ~ .z { 
  animation: 0.5s linear 1s zoomin forwards;
}
@keyframes zoomin {
  from { width: 300px; }
  to { width: 900px; }
}
body {
  background-color: purple;
  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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.