<input id="trigger" class="toggle-checkbox" type="checkbox"><label for="trigger">Mmmm... Turkey</label>

<div class="h">
  <div class="head"></div>
  <div class="s"><img src="https://assets.codepen.io/1804713/sandwich.svg" /></div>
<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 284 324"><path fill="#442818" fill-rule="nonzero" d="M127 227l-42-59.2-8.4 6-6-8.4 8.5-6-12-17-8.4 6-12-16.8-8.4 6-12-17-8.4 6L0 101.5l8.4-6-6-8.5 8.5-6-.2-.3 16.8-12 .1.3 36 50.7 8.4-6 12 16.9 8.4-6 59.8 84.4-25.3 18z"/><path fill="#676767" fill-rule="nonzero" d="M104.3 141.4l107.7 152-17 12-107.5-152z"/><path fill="#3a3a3a" fill-rule="nonzero" d="M94.8 110l6 8.5-8.4 6-6-8.5z"/><g><path fill="#442818" fill-rule="nonzero" d="M156.5 227l41.9-59.2 8.4 6 6-8.4-8.4-6 12-17 8.3 6 12-16.8 8.4 6 12-17 8.4 6 18-25.2-8.5-6 6-8.5-8.4-6 .2-.3-16.8-12-.2.3-36 50.7-8.3-6-12 16.9-8.4-6-59.8 84.4 25.2 18z"/><path fill="#676767" fill-rule="nonzero" d="M179.1 141.4l-107.6 152 16.8 12 107.7-152z"/><path fill="#3a3a3a" fill-rule="nonzero" d="M188.6 110l-6 8.5 8.5 6 6-8.5z"/></g><g transform="matrix(1.1471 0 0 1.15124 31.4 0)"><path id="neck" fill="#e1b389" fill-rule="nonzero" d="M72 108.2h45.9v18.3H72z"/><path fill="#00b0d8" fill-rule="nonzero" d="M54.2 243v-72H45v9h-9v9H0v-27h9v-9h8.3v-9.2H27V135h9v-9h117v9h9v9h9v9h9v9h9v18.9h-36v-.7h-9v-9h-9.4v90.2h-.2v19h-36v-19H90v19H54V243h.2z"/><path id="neck2" fill="#e1b389" fill-rule="nonzero" d="M72 116.7h45.9V135H72z"/><g fill="#00242c" fill-rule="nonzero"><path d="M117 189h9v9h-9zM108 180h9v9h-9zM99 171h9v9h-9zM126 198h9v9h-9zM72 144h9v9h-9zM90 162h9v9h-9zM54 126h9v9h-9zM63 135h9v9h-9zM81 153h9v9h-9zM126 216h9v9h-9zM117 216h9v9h-9zM108 207h9v9h-9zM117 207h9v9h-9zM99 189h9v9h-9zM99 198h9v9h-9zM108 198h9v9h-9zM36 126h9v9h-9zM63 162h9v9h-9zM90 180h9v9h-9zM90 189h9v9h-9zM72 162h9v9h-9zM72 171h9v9h-9zM81 180h9v9h-9zM81 171h9v9h-9zM54 144h9v9h-9zM45 144h9v9h-9zM45 135h9v9h-9zM36 135h9v9h-9zM63 153h9v9h-9zM54 153h9v9h-9zM126 207h9v9h-9zM108 189h9v9h-9zM99 180h9v9h-9zM117 198h9v9h-9zM72 153h9v9h-9zM90 171h9v9h-9zM45 126h9v9h-9zM54 135h9v9h-9zM81 162h9v9h-9zM63 144h9v9h-9z"/></g><path fill="#092818" fill-rule="nonzero" d="M48.5 122.2l5.6 4.5-4.4 5.6-5.6-4.5z"/><path fill="#0d3d24" fill-rule="nonzero" d="M54.1 126.7l5.6 4.4-4.4 5.6-5.6-4.4z"/><path fill="#092818" fill-rule="nonzero" d="M59.7 131l5.7 4.5-4.5 5.7-5.6-4.5z"/><path fill="#0d3d24" fill-rule="nonzero" d="M55.3 136.7l5.6 4.5-4.4 5.6-5.6-4.5z"/><path fill="#092818" fill-rule="nonzero" d="M50.9 142.3l5.6 4.5-4.4 5.6-5.7-4.4z"/><path fill="#0d3d24" fill-rule="nonzero" d="M46.4 148l5.7 4.4-4.5 5.6-5.6-4.4z"/><path fill="#092818" fill-rule="nonzero" d="M40.8 143.5l5.6 4.5-4.4 5.6-5.6-4.4z"/><path fill="#0d3d24" fill-rule="nonzero" d="M35.2 139.1l5.6 4.4-4.4 5.7-5.7-4.5z"/><path fill="#092818" fill-rule="nonzero" d="M39.6 133.5l5.6 4.4-4.4 5.6-5.6-4.4z"/><path fill="#0d3d24" fill-rule="nonzero" d="M44 127.8l5.7 4.5-4.5 5.6-5.6-4.4z"/><path fill="#092818" fill-rule="nonzero" d="M49.7 132.3l5.6 4.4-4.4 5.6-5.7-4.4z"/><path fill="#0d3d24" fill-rule="nonzero" d="M45.2 138l5.7 4.3-4.5 5.7-5.6-4.5z"/><path fill="#092818" fill-rule="nonzero" d="M58.6 121l5.6 4.5-4.5 5.6-5.6-4.4z"/><g><path fill="#092818" fill-rule="nonzero" d="M75 145.7l5.7 4.5-4.4 5.6-5.7-4.4z"/><path fill="#0d3d24" fill-rule="nonzero" d="M80.7 150.2l5.6 4.4-4.4 5.6-5.6-4.4z"/><path fill="#092818" fill-rule="nonzero" d="M86.3 154.6L92 159l-4.5 5.7-5.6-4.5z"/><path fill="#0d3d24" fill-rule="nonzero" d="M81.9 160.2l5.6 4.5-4.4 5.6-5.6-4.4z"/><path fill="#092818" fill-rule="nonzero" d="M77.5 165.9l5.6 4.4-4.4 5.6-5.7-4.4z"/><path fill="#0d3d24" fill-rule="nonzero" d="M73 171.5l5.7 4.4-4.5 5.6-5.6-4.4z"/><path fill="#092818" fill-rule="nonzero" d="M67.4 167l5.6 4.5-4.4 5.6-5.6-4.4z"/><path fill="#0d3d24" fill-rule="nonzero" d="M61.8 162.6l5.6 4.4-4.4 5.7-5.7-4.5z"/><path fill="#092818" fill-rule="nonzero" d="M66.2 157l5.6 4.4-4.4 5.6-5.6-4.4z"/><path fill="#0d3d24" fill-rule="nonzero" d="M70.6 151.4l5.7 4.4-4.5 5.6-5.6-4.4z"/><path fill="#092818" fill-rule="nonzero" d="M76.3 155.8l5.6 4.4-4.4 5.7-5.7-4.5z"/><path fill="#0d3d24" fill-rule="nonzero" d="M71.8 161.4l5.7 4.5-4.5 5.6-5.6-4.5z"/><path fill="#092818" fill-rule="nonzero" d="M85.1 144.5l5.7 4.5-4.5 5.6-5.6-4.4z"/></g><g><path fill="#092818" fill-rule="nonzero" d="M101.7 169.2l5.6 4.5-4.4 5.6-5.7-4.4z"/><path fill="#0d3d24" fill-rule="nonzero" d="M107.3 173.7l5.6 4.4-4.4 5.6-5.6-4.4z"/><path fill="#092818" fill-rule="nonzero" d="M113 178.1l5.6 4.4-4.5 5.7-5.6-4.5z"/><path fill="#0d3d24" fill-rule="nonzero" d="M108.5 183.7l5.6 4.5-4.4 5.6-5.6-4.4z"/><path fill="#092818" fill-rule="nonzero" d="M104 189.4l5.7 4.4-4.4 5.6-5.7-4.4z"/><path fill="#0d3d24" fill-rule="nonzero" d="M99.6 195l5.7 4.4-4.5 5.7-5.6-4.5z"/><path fill="#092818" fill-rule="nonzero" d="M94 190.6l5.6 4.4-4.4 5.6-5.6-4.4z"/><path fill="#0d3d24" fill-rule="nonzero" d="M88.4 186.1l5.6 4.5-4.4 5.6-5.7-4.5z"/><path fill="#092818" fill-rule="nonzero" d="M92.8 180.5l5.6 4.4-4.4 5.7-5.6-4.5z"/><path fill="#0d3d24" fill-rule="nonzero" d="M97.2 174.9l5.7 4.4-4.5 5.6-5.6-4.4z"/><path fill="#092818" fill-rule="nonzero" d="M102.9 179.3l5.6 4.4-4.4 5.7-5.7-4.5z"/><path fill="#0d3d24" fill-rule="nonzero" d="M98.4 185l5.7 4.4-4.5 5.6-5.6-4.4z"/><path fill="#092818" fill-rule="nonzero" d="M111.7 168l5.7 4.5-4.5 5.6-5.6-4.4z"/></g><g><path fill="#092818" fill-rule="nonzero" d="M128.3 192.7l5.6 4.5-4.4 5.6-5.7-4.4z"/><path fill="#0d3d24" fill-rule="nonzero" d="M133.9 197.2l5.6 4.4-4.4 5.6-5.6-4.4z"/><path fill="#092818" fill-rule="nonzero" d="M139.5 201.6l5.6 4.4-4.4 5.7-5.6-4.5z"/><path fill="#0d3d24" fill-rule="nonzero" d="M135 207.2l5.7 4.5-4.4 5.6-5.7-4.4z"/><path fill="#092818" fill-rule="nonzero" d="M130.6 212.9l5.7 4.4-4.5 5.6-5.6-4.4z"/><path fill="#0d3d24" fill-rule="nonzero" d="M126.2 218.5l5.6 4.4-4.4 5.7-5.6-4.5z"/><path fill="#092818" fill-rule="nonzero" d="M120.6 214l5.6 4.5-4.4 5.6-5.7-4.4z"/><path fill="#0d3d24" fill-rule="nonzero" d="M115 209.6l5.6 4.5-4.5 5.6-5.6-4.4z"/><path fill="#092818" fill-rule="nonzero" d="M119.4 204l5.6 4.4-4.4 5.7-5.6-4.5z"/><path fill="#0d3d24" fill-rule="nonzero" d="M123.8 198.4l5.7 4.4-4.5 5.6-5.6-4.4z"/><path fill="#092818" fill-rule="nonzero" d="M129.5 202.8l5.6 4.4-4.5 5.7-5.6-4.5z"/><path fill="#0d3d24" fill-rule="nonzero" d="M125 208.4l5.6 4.5-4.4 5.6-5.6-4.4z"/><path fill="#092818" fill-rule="nonzero" d="M138.3 191.5l5.7 4.5-4.5 5.6-5.6-4.4z"/></g><g><path fill="#231f20" fill-rule="nonzero" d="M80.8 185.1l2.7-9.7L93 178l-2.6 9.8h.1l-7.5 28.9 9.3 2.5-2.6 9.7-16-4.5-3.2-.8v.1l-3-.8-6.6-1.6v-.2l-9.8-2.6 2.6-9.7 9.8 2.7 7.6-29 9.6 2.6z"/></g><g><path fill="#a7a9ac" fill-rule="nonzero" d="M70.5 223.7l9.7 2.6L65.5 281l-9.9-1.9 15-55.5z"/></g><g><path fill="#bbbdc0" fill-rule="nonzero" d="M60.9 221.1l9.6 2.6-14.9 55.5H45.3l15.6-58.1z"/></g><g id="v"><path fill="#aedee4" fill-rule="nonzero" d="M72 234h9v9h-9z" transform="matrix(8.97619 0 0 1 -592 0)"/></g><g><path fill="#e1b389" fill-rule="nonzero" d="M189 191.6v-23.4h-24.8l-.5-6h-22.4v35.7h35.5v-6.3H189z"/></g><g><path fill="#e1b389" fill-rule="nonzero" d="M0 191.6v-23.4h24.8l.5-6h22.4v35.7H12.2v-6.3H0z"/></g><g><path fill="#fccb98" fill-rule="nonzero" d="M155.4 166.1v18.1H150v9h-8v9h-22.7v-9h12.3v-27h-18.5v-9l34-.1-.4 9h8.7z"/></g><g><path fill="#fccb98" fill-rule="nonzero" d="M33.6 166.1v18.1H39v9h8v9h22.7v-9H57.4v-27h18.5v-9l-34-.1.4 9h-8.7z"/></g></g></svg>


</div>
<div class="z">
  <div class="ninja z1">
    
  </div>
  <div class="ninja2 z2"><div class="cord"></div></div>
</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 .ninja { 
  animation: 10s linear 0s sneaky forwards;
}

@keyframes sneaky {
  0% {
  transform: rotate(180deg) translate(0, 10vw) scale(0.333);
  }
  5%, 15% {
    transform: rotate(180deg) translate(0, -10vw) scale(0.333);
  }
  20% {
    transform: rotate(180deg) translate( 0, 10vw ) scale(0.333);
  }
  25%, 30% {
    transform: rotate(180deg) translate( -60vw, 10vw ) scale(0.667);
  }
  40%, 50% {
    transform: rotate(180deg) translate( -60vw, -10vw ) scale(0.667);
  }
  60%, 100% {
    transform: rotate(180deg) translate( -60vw, 10vw ) scale(0.667);
  }
}
.ninja {
  background-image: url("https://assets.codepen.io/1804713/ninja2.svg");
  width: 30vw;
  height: 39vw;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transform-origin: center;
  transform: rotate(180deg) translate(0, 10vw) scale(0.333);
  top: -30vw;
  left: 10vw;
  position: absolute;
}
.toggle-checkbox:checked ~ .z .ninja2 { 
  animation: 10s linear 0s sneaky2 forwards;
}
@keyframes sneaky2 {
   0%, 70% {
    transform: rotate(180deg) translate( -15vw, 0 ) scale(0.667);
  }
  80%, 85% {
    transform: rotate(180deg) translate( -15vw, calc( -100vh + 3vw ) ) scale(1);
  }
  100% {
    transform: rotate(180deg) translate( -15vw, 0 ) scale(1);
  }
}

.toggle-checkbox:checked ~ .h .s { 
  animation: 10s linear 0s stolen forwards;
}
@keyframes stolen {
   0%, 85% {
    transform: translate( 0, 0 );
  }
  100% {
    transform: translate( 0, calc( -100vh + 3vw ) );
  }
}
.toggle-checkbox:checked ~ .h .head { 
  animation: turnhead 1s steps(13, end) 6s forwards;
}
@keyframes turnhead {
   from {
        background-position: 0;
    }
    to {
        background-position: -208vw;
    }
}
.toggle-checkbox:checked ~ .h #neck, .toggle-checkbox:checked ~ .h #neck2 { 
  animation: neckcolor 1s ease-in-out 6s forwards;
}
@keyframes neckcolor {
  0%, 20%{
    fill: #e1b389;
  }
    100% {
      fill: #FCCB98;
    }
}

.ninja2 {
  background-image: url("https://assets.codepen.io/1804713/ninja-arm.svg");
  width: 30vw;
  height: 39vw;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transform-origin: center bottom;
  transform: rotate(180deg) translate( -5vw, 0 ) scale(1);
  bottom: calc( 100vh + 39vw );
  left: 10vw;
  position: absolute;
  z-index: 50;
}
.cord {
  width: 1vw;
  height: 200vh;
  position: absolute;
  top: 27vw;
  left: calc( 50% + 0.5vw );
  background-color: #760505;
  z-index: -1;
}
.toggle-checkbox:checked ~ .z { 
  animation: 10s linear 0s drop forwards;
}
.z {
}
.h svg, .h img {
  width: 30vw;
  max-width: 800px;
}
.h {
  position: absolute;
  bottom: -8vw;
  left: 35vw;
  z-index: 10;
}
.s {
  position: absolute;
  bottom: 0;
  z-index: 75;
}
.head {
  background-image: url("https://assets.codepen.io/1804713/HeadTurn1.svg");
  background-repeat: no-repeat;
  width: 16vw;
  height: 16vw;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 7vw;
  transform: scale(-1, 1);
}
body {
  background-color: mistyrose;
  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: 200px;
  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.