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


<div class="heyparent"><div class="hey"></div></div>
<div class="chomparent"><div class="chomp"></div></div>
<div class="chompword">CHOMP!</div>


<div class="logo"><a href="https://undead.institute" target="_blank"><img src="https://undead.institute/files/animation/UndeadInsti-LogoOnWhite.png" alt="Getting Braaains should be fun"></a></div>
.toggle-checkbox:checked ~ .heyparent .hey { 
  animation: flap 200ms steps(3, end) alternate infinite;
}
.toggle-checkbox:checked ~ .heyparent { 
  animation: focustoblur 6s;
  animation-fill-mode: forwards;
}
.toggle-checkbox:checked ~ .chomparent { 
  animation: blurtofocus 6s;
  animation-fill-mode: forwards;
}
.toggle-checkbox:checked ~ .chompword { 
  animation: chompwords 6s;
  animation-fill-mode: forwards;
}
body {
  background-color: darkseagreen;
  overflow: hidden;
}
.hey {
background-image: url(https://undead.institute/files/animation/flapping.png);
  background-position: -300px;
  width: 100px;
  height: 85px;
  background-repeat: no-repeat;
  transform: scale(0.5);
  position: absolute;
  bottom: 55vh;
  left: calc( 50% - 50px );
}
.heyparent {
  width: 100%;
  height: 100vh;
  position: relative;
}
.chomparent {
  filter: blur(90px);
  position: absolute;
  bottom: -20em;
  left: calc(20% - 250px);
  transform:translateY( 10em );
}
.chomp {
  background-image: url(https://undead.institute/files/animation/chomp.png);
  width: 500px;
  height: 470px;
  background-repeat: no-repeat;
  background-position: -1500px;
}
.chompword {
  font-size: 5em;
  font-weight: bold;
  font-family: Verdana, Arial, sans-serif;
  position: absolute;
  bottom: 4em;
  left: calc(20% + 1em);
  transform: rotate(-15deg);
  opacity: 0;
}
@keyframes flap {
  from {
    background-position: 0;
  }
  to {
    background-position: -300px;
  }
}
@keyframes chomp {
  to {
  background-position: -1500px 0;
  }
}


@keyframes blurtofocus {
  0%{
    filter: blur(90px);
    transform:translateY( 0 );
    opacity: 0;
  }
  30% {
    transform:translateY( 0 );
    opacity: 1;
  }
  40% {
    filter: blur(90px);
  }
  65% {
    filter: blur(0);
  }
  80% {
    transform:translateY( -10em );
  }
  82%, 100% {
    filter: blur(0);
    transform:translateY( -6.5em );
  }
}
@keyframes focustoblur {
  0%, 40% {
    filter: blur(0);
  }
  50%, 100% {
    filter: blur(3px);
  }
}
@keyframes chompwords {
  0%, 80%, 100% {
    opacity: 0;
  }
  81%, 99% {
    opacity: 1;
  }
  
}


.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.