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



<div class="car">
  <svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-miterlimit="1.5" clip-rule="evenodd" viewBox="0 0 1920 1080"><path fill="#36251a" d="M1526.37 619.94h53.06v498.75h-561.49V619.94H1071v-60.8h455.37v60.8z"/>

    <g id="human" transform="translate(712.42 170.93) scale(2.78746)"><path fill="#00b0d8" fill-rule="nonzero" d="M1497.65 803.35h31.67v31.67h31.67v31.66h31.67v31.67h31.67v96.91h-126.68v-33h-31.81v-31.67h-32.98v317.7h-282.81V930.02h-32.42v31.67h-31.67v31.67H959.28v-95h31.67v-31.68h29.08v-32.23h34.12v-30.96h31.81v-31.74h64.09v-.07h347.6v31.67z" transform="translate(-255.58 -100.78) scale(.35875)"/><path fill="#e1b389" fill-rule="nonzero" d="M72 117h9v9h-9z" transform="matrix(6.43186 0 0 3.74749 -283.64 -284.72)"/><path fill="#3a3435" fill-rule="nonzero" d="M1401.05 359.99H1433v63.33h-283.7V360h31.66v-31.67h220.09v31.67z" transform="translate(-255.58 -100.78) scale(.35875)"/><path fill="#fccb98" fill-rule="nonzero" d="M1402.93 423.32h31.38v63.34h63.34v95.29h-31.67v95.15h-31.67v32.38h-31.38v29.5h-63.34v32.7h-95.29v-32.7h-63.34v-29.5h-31.66V677.1h-31.67v-95.15h-31.67v-95.29h63.34v-63.34h31.66v-31.67h221.97v31.67z" transform="translate(-255.58 -100.78) scale(.35875)"/><path fill="#3a3435" fill-rule="nonzero" d="M45 27h9v9h-9zM135 27h9v9h-9z" transform="matrix(1.26235 0 0 5.06633 88.56 -85.7)"/><path fill="#fff" fill-rule="nonzero" d="M99 36h9v9h-9z" transform="matrix(3.79834 0 0 1.27364 -162.5 27.95)"/><path fill="#fff" fill-rule="nonzero" d="M63 36h9v9h-9z" transform="matrix(3.79834 0 0 1.24723 -71.2 29.02)"/><path fill="#3a3435" fill-rule="nonzero" d="M135 54h9v9h-9z" transform="matrix(1.26235 0 0 4.33165 88.56 -176.37)"/><path fill="#b18c6f" fill-rule="nonzero" d="M81 90h9v9h-9z" transform="matrix(1.40667 0 0 .34554 87.64 107.76)"/>
      <path id="m2" fill="#b18c6f" fill-rule="nonzero" d="M81 90h9v9h-9z" transform="matrix(1.40667 0 0 .34554 87.64 107.76)"/>
      <path id="m1" fill="#b18c6f" fill-rule="nonzero" d="M81 90h9v9h-9z"/>
      <path fill="#e1b389" fill-rule="nonzero" d="M90 54h9v9h-9z" transform="matrix(1.26235 0 0 3.79551 88.56 -119.8)"/><path fill="#e1b389" fill-rule="nonzero" d="M90 63h9v9h-9z" transform="matrix(3.81345 0 0 1.26235 -175.42 -17.2)"/><path fill="#e1b389" fill-rule="nonzero" d="M90 63h9v9h-9z" transform="matrix(3.81345 0 0 1.26235 -129.24 -17.2)"/><path fill="#444445" fill-rule="nonzero" d="M72 45h9v9h-9zM108 45h9v9h-9z" transform="translate(88.56 17) scale(1.26235)"/></g>
    <path fill="#404040" d="M1166.45 719.57h262.17v40.47h38.52v38.02h39.46v39.6h-1.02v225.1h-40.47v-225.1h-36.4v38.11h-263.94v-38.12h-37.29v225.1h-40.47v-225.1h-.12v-39.59h39.1v-38.02h40.46v38.02h38.33v38.12h183.93v-38.12h37.96v-38.02h-260.22v-40.47z"/><path fill="#fccb98" d="M1087.72 835h41.78v31.67h-49.26v-12.7h-24.18v-43.11h31.66V835z"/>
    <path id="lthand" fill="#fccb98" d="M1506.31 929.17v-30.82h31.67v78.32h-73.45v-47.5h41.78z"/>
    <path fill="#a6a398" d="M123.44 1099.62v-430.2h24.93V552.5h24.34V447.5h22.34v-70.6h25v-79.73h26.46V236.1h30v-31.78h34.15v-36.07h1314.69v36.07h34.15v31.78h30v61.06h26.46v79.73h25.01v70.6h22.33V552.5h24.34v116.93h24.94v430.2H123.44zm1615.09-248.09V734.6h-22.57V629.6h-2.19v-70.6h-27.2v-79.73h-35.3v-92.84h-25.92v-121.7h-26.26V240.4H336.92v24.33h-26.26v121.71h-25.91v92.84h-35.31V559h-27.2v70.6h-2.2V734.6h-22.56v116.93h1541.05z"/><path fill="#fffdd0" d="M1725.66 903.11h16.19v17.99h19.26v18.55h17.87v72.94h-17.87v16.98h-19.26v18.02h-16.19v18.74h-74.26v-18.74h-19.05v-18.02h-17.75v-16.98h-18.86v-72.94h18.86V921.1h17.75v-17.99h19.05v-18.28h74.26v18.28zM316.4 903.11h16.2v17.99h19.25v18.55h17.87v72.94h-17.87v16.98h-19.26v18.02h-16.18v18.74h-74.27v-18.74H223.1v-18.02h-17.75v-16.98h-18.86v-72.94h18.86V921.1h17.75v-17.99h19.05v-18.28h74.27v18.28z"/><path fill="#59564d" d="M824 345h242v85H824z"/><path fill="#3d3b34" d="M906.5 304h77v83.5h-77z"/>
    <g id="mulberry"><path fill="#fff" stroke="#9e9e9e" stroke-width="3" d="M278.73 333.62H107.1v-26.1H80.47v-28.08H50.92v-28.1H24.83V125.1h26.09v-28.1h29.55V68.9h26.63V42.82h308.48V68.9h26.64V97h29.55v28.09h26.09v126.25h-26.1v28.1h-29.54v28.09h-26.64v26.09h-84.85v26.85H354v26.62h26v24.85h24.85V439h-26v-24.84H354v-26.63h-49.8v-26.85h-25.48v-27.06z"/><path fill="#3f3f3f" fill-rule="nonzero" d="M1.25-1.25v.38h-.13V-1H1v-.13H.75v1h.13V0h-.5v-.13H.5v-1H.25V-1H.12v.13H0v-.38h1.25z" transform="matrix(40.20403 0 0 40.20394 174.37 120.27)"/><path fill="#3f3f3f" fill-rule="nonzero" d="M.75-.75v.63h.13V0H.11v-.13H0v-.24h.13V-.5H.5v-.25H.12v-.13h.5v.13h.13zm-.5.63H.5v-.26H.25v.26z" transform="matrix(40.20403 0 0 40.20394 229.65 120.27)"/><path fill="#3f3f3f" fill-rule="nonzero" d="M.75-.75v.13H.62v.24h.13v.13h.13v.13h.24V0h-.5v-.25H.5v-.13H.37V0H0v-.13h.13v-1H0v-.12h.38v.75H.5v-.13h.13v-.12H.5v-.13H1v.13H.75z" transform="matrix(40.20403 0 0 40.20394 269.86 120.27)"/><path fill="#3f3f3f" fill-rule="nonzero" d="M.63-.5v-.13H.5v-.12H.37v.13H.26v.12h.38zm.12-.13h.13v.26H.24v.12h.13v.13h.24v-.13h.26v.13H.74V0h-.5v-.13H.12v-.12H0v-.38h.13v-.12h.12v-.13h.38v.13h.12v.13z" transform="matrix(40.20403 0 0 40.20394 320.11 120.27)"/><path fill="#3f3f3f" fill-rule="nonzero" d="M.88-.5v.25H.61V-.5H.5v-.25H.37V-1H.26v.88h.13V0H0v-.13h.13v-1H0v-.12h.5V-1h.13v.25h.12v.25h.13v-.25H1V-1h.13v-.25h.5v.13H1.5v1h.13V0h-.5v-.13h.12V-1h-.13v.25H1v.25H.87z" transform="matrix(40.20403 0 0 40.20394 81.4 208.35)"/><path fill="#3f3f3f" fill-rule="nonzero" d="M1-.13h.13V0H.74v-.13H.62V0H.26v-.13H.12v-.62H0v-.13h.38v.76h.24v-.13h.13v-.5H.62v-.13H1v.76z" transform="matrix(40.20403 0 0 40.20394 151.76 208.35)"/><path fill="#3f3f3f" fill-rule="nonzero" d="M.38-1.25v1.13H.5V0H0v-.13h.13v-1H0v-.12h.38z" transform="matrix(40.20403 0 0 40.20394 202.01 208.35)"/><path fill="#3f3f3f" fill-rule="nonzero" d="M.88-.75v.13H1v.37H.87v.13H.76V0H0v-.13h.13v-1H0v-.12h.38v.38h.37v.12h.13zm-.13.5v-.38H.62v-.12H.39v.63h.24v-.13h.13z" transform="matrix(40.20403 0 0 40.20394 227.14 208.35)"/><path fill="#3f3f3f" fill-rule="nonzero" d="M.63-.5v-.13H.5v-.12H.37v.13H.26v.12h.38zm.12-.13h.13v.26H.24v.12h.13v.13h.24v-.13h.26v.13H.74V0h-.5v-.13H.12v-.12H0v-.38h.13v-.12h.12v-.13h.38v.13h.12v.13z" transform="matrix(40.20403 0 0 40.20394 272.37 208.35)"/><path fill="#3f3f3f" fill-rule="nonzero" d="M.5-.75v-.13h.25v.26H.37v.5H.5V0H0v-.13h.13v-.62H0v-.13h.38v.13H.5z" transform="matrix(40.20403 0 0 40.20394 312.57 208.35)"/><path fill="#3f3f3f" fill-rule="nonzero" d="M.5-.75v-.13h.25v.26H.37v.5H.5V0H0v-.13h.13v-.62H0v-.13h.38v.13H.5z" transform="matrix(40.20403 0 0 40.20394 347.75 208.35)"/><path fill="#3f3f3f" fill-rule="nonzero" d="M.5-.5v.25h.13V-.5h.12v-.25H.62v-.13H1v.13H.87v.25H.76v.25H.62V0H.5v.25H.37v.13H.14V.11h.24v-.37H.26V-.5H.12v-.25H0v-.13h.5v.13H.37v.25H.5z" transform="matrix(40.20403 0 0 40.20394 382.93 208.35)"/><path fill="#3f3f3f" fill-rule="nonzero" d="M.25 0H.12v-.25h.26v.38H.24v.12H.12V.12h.13V0z" transform="matrix(40.20403 0 0 40.20394 428.16 208.35)"/><path fill="#3f3f3f" fill-rule="nonzero" d="M1.38-1.25v.13h-.13v1h.13V0h-.5v-.13H1v-.5H.37v.5H.5V0H0v-.13h.13v-1H0v-.12h.5v.13H.37v.37H1v-.38H.87v-.12h.5z" transform="matrix(40.20403 0 0 40.20394 111.55 296.44)"/><path fill="#3f3f3f" fill-rule="nonzero" d="M1-.13h.13V0H.74v-.13H.62V0H.26v-.13H.12v-.62H0v-.13h.38v.76h.24v-.13h.13v-.5H.62v-.13H1v.76z" transform="matrix(40.20403 0 0 40.20394 171.86 296.44)"/><path fill="#3f3f3f" fill-rule="nonzero" d="M.88-.75h.24v-.13h.38v.13h.13v.63h.12V0h-.5v-.13h.13v-.62h-.25v.13H1v.5h.13V0h-.5v-.13h.12v-.62H.5v.13H.37v.5H.5V0H0v-.13h.13v-.62H0v-.12h.38v.12H.5v-.13h.38v.13z" transform="matrix(40.20403 0 0 40.20394 222.11 296.44)"/><path fill="#3f3f3f" fill-rule="nonzero" d="M.75-.75v.63h.13V0H.11v-.13H0v-.24h.13V-.5H.5v-.25H.12v-.13h.5v.13h.13zm-.5.63H.5v-.26H.25v.26z" transform="matrix(40.20403 0 0 40.20394 297.5 296.44)"/><path fill="#3f3f3f" fill-rule="nonzero" d="M1-.75v.63h.13V0h-.5v-.13h.12v-.62H.5v.13H.37v.5H.5V0H0v-.13h.13v-.62H0v-.13h.38v.13H.5v-.13h.38v.13H1z" transform="matrix(40.20403 0 0 40.20394 337.7 296.44)"/><path fill="#3f3f3f" fill-rule="nonzero" d="M.5 0H.25v-.25H.5V0zm0-1.25v.88H.25v-.88H.5z" transform="matrix(40.20403 0 0 40.20394 387.95 296.44)"/></g>
    <path fill="#383630" d="M488 935h1005.8v389H488z"/><path fill="#676459" d="M499.5 912h981v23h-981zM499.5 935v335h-23V935z"/><path fill="#676459" d="M590.75 912v358h-23V912zM682.01 912v358h-23V912zM773.26 912v358h-23V912zM864.52 912v358h-23V912zM955.77 912v358h-23V912zM1047.03 912v358h-23V912zM1138.28 912v358h-23V912zM1229.54 912v358h-23V912zM1320.79 912v358h-23V912zM1412.05 912v358h-23V912zM1503.3 935v338h-23V935z"/></svg>
  <svg id="zomb" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-miterlimit="1.5" clip-rule="evenodd" viewBox="0 0 1920 1080">
    <g><path fill="#36251a" d="M809.76 729.94h53.06v498.75h-561.5V729.94h53.07v-60.8h455.37v60.8z" transform="matrix(1 0 0 1 0 -110)"/><path fill="#43342a" d="M581.96 79.33h435.98v157.89H581.96z" transform="matrix(1.1907 0 0 1 -370.54 971.23)"/><path fill="#91c1a3" d="M0 187.58h39.12v24.68H0z" transform="matrix(3.62301 0 0 3.29404 241.93 218.08)"/><path fill="#91c1a3" d="M167.91 187.61h39.12v24.68h-39.12z" transform="matrix(3.30941 0 0 3.29404 241.93 218.08)"/><path fill="#676767" d="M39.67 148.09v-9.87h128.98v9.9h9.6v9.87h9.91v9.87h9.92v9.88H208v9.87l-29.76.15v9.56l-19.33.16v-9.56l-10.36-.01v62.47H59.5v-62.5l-10.34-.04-.13 9.64-18.86-.16v-9.59L0 187.58v-9.87h9.92v-9.87h9.92v-9.88h9.92v-9.87h9.91z" transform="translate(241.93 218.08) scale(3.29404)"/><path fill="#5a5a5a" d="M59.51 251.63h89.04v24.93h.04v29.66h-39.62v-20.27h-9.9v20.27H59.51v-54.6z" transform="translate(241.93 218.08) scale(3.29404)"/><path fill="#9cd3b3" d="M0 207.33h9.92v-9.88h49.6v9.88h-10.3v19.74h-9.55v9.87H19.65v-9.87H9.92v-9.87H0v-9.87zM148.49 197.48h49.6v9.87H208v9.88h-9.92v9.87h-9.73v9.87h-20.03v-9.87h-9.54v-19.75h-10.3v-9.87z" transform="translate(241.93 218.08) scale(3.29404)"/><path fill="#91c1a3" d="M78.98 128.34h49.36v19.62H78.98z" transform="matrix(3.30941 0 0 3.29404 241.93 218.08)"/><path fill="#3a3a3a" d="M60.5 9.87h8.93V0h68.7v9.87h10.65V29.5H60.5V9.87z" transform="translate(241.93 218.08) scale(3.29404)"/><path fill="#9cd3b3" d="M139.63 29.62h9.15v19.74h19.84V79.5h-10.4v29.1h-9.44v9.65h-9.15v10.1h-20.1v9.88H89.27v-9.88H69.43v-10.1h-9.92v-9.64H49.6V79.49h-9.94V49.36H59.5V29.62h9.92v-9.88h70.2v9.88z" transform="translate(241.93 218.08) scale(3.29404)"/><path fill="#fbeb8e" d="M108.6 39.49h33.12v30.12H108.6z" transform="matrix(2.978 0 0 3.29404 277.92 218.08)"/><path fill="#fbeb8e" d="M69.11 39.49h29.37v30.12H69.11z" transform="matrix(3.30941 0 0 3.29404 241.93 218.08)"/><path fill="#758b7c" d="M88.85 98.73h29.62v9.87H88.85z" transform="matrix(3.30941 0 0 3.29404 241.93 218.08)"/><path fill="#91c1a3" d="M98.73 59.24h9.87v29.37h-9.87z" transform="matrix(3.30941 0 0 3.29404 241.93 218.08)"/><path fill="#444445" d="M69.11 49.36h9.87v9.87h-9.87zM118.47 39.49h9.87v9.87h-9.87z" transform="matrix(3.30941 0 0 3.29404 241.93 218.08)"/><path fill="#3a3a3a" d="M148.09 29.62h9.87v39.12h-9.87zM49.36 29.62h9.87v39.12h-9.87z" transform="matrix(3.30941 0 0 3.29404 241.93 218.08)"/><g><path fill="#4d4c4c" d="M59.24 256.69h88.62v9.87H59.24z" transform="matrix(3.30941 0 0 3.29404 241.93 185.14)"/></g></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 ~ .car #zomb { 
  animation: 10s linear 0s eject forwards;
}
@keyframes eject {
  0%, 45% {
    transform: translateY(0) rotate(0);
  }
  50%, 100% {
    transform: translateY(-100vw) rotate(10deg);
  }
}
.z {
  max-width: 400px;
  margin: auto;
}
.car {
  width: 60vw;
  position: absolute;
  left: 20vw;
  bottom: -2vw;
}
#mulberry {
  opacity: 0;
}
.toggle-checkbox:checked ~ .car #mulberry { 
  animation: 10s linear 0s talk forwards;
}
@keyframes talk {
  0%, 5% {
    opacity: 0;
  }
  5.5%, 25% {
    opacity: 1;
  }
  25.5%, 100% {
    opacity: 0;
  }
}
.toggle-checkbox:checked ~ .car #lthand { 
  animation: 10s linear 0s pressbutton forwards;
}
#lthand {
   transform-origin: 90% 80%;
   transform: translate(0, -110px) rotate(0deg);
}
@keyframes pressbutton {
  0%, 24% {
   transform: translate(0, -110px) rotate(0);
  } 
  50%, 100% {
   transform: translate(0, -100px) rotate(-25deg);
  }
}
#zomb {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.toggle-checkbox:checked ~ .car #m1 { 
  animation: 10s linear 0s smile1 forwards;
}
@keyframes smile1 {
  0%, 65% {
    transform: translate(122px, 102.5px) scaleY(0.4) rotate(0);
  }
  80%, 100% {
    transform: rotate(10deg) translate(135px, 65px) scaleY(0.4);
  }
}
#m1 {
    transform: translate(122px, 102.5px) scaleY(0.4) rotate(0);
}
body {
  background-color: cornsilk;
  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.