rawr!

by ian_smithz

HTML

<h2>
Rawr! I am Bernard the Dinosaur
</h2>

<div class='dino'></div>
<div class='eye'></div>
<div class='mouth'></div>
<div class='ground'></div>
<div class='comets'></div>

CSS

@-webkit-keyframes eye {
  0% {
    box-shadow:  3em -9em #535353;
  }
  5% {
    box-shadow: 0 0 0 0 #535353;
  }
  50% {
    box-shadow:  0em 0em #535353;
  }
}
@-moz-keyframes eye {
  0% {
    box-shadow:  3em -9em #535353;
  }
  5% {
    box-shadow: 0 0 0 0 #535353;
  }
  50% {
    box-shadow:  0em 0em #535353;
  }
}
@keyframes eye {
  0% {
    box-shadow:  3em -9em #535353;
  }
  5% {
    box-shadow: 0 0 0 0 #535353;
  }
  50% {
    box-shadow:  0em 0em #535353;
  }
}
@-webkit-keyframes mouth {
  0% {
    box-shadow:  6em -4em #535353, 7em -4em #535353, 8em -4em #535353;
  }
  50% {
    box-shadow:  5em -3em #535353, 6em -3em #535353, 7em -3em #535353, 8em -3em #535353;
  }
}
@-moz-keyframes mouth {
  0% {
    box-shadow:  6em -4em #535353, 7em -4em #535353, 8em -4em #535353;
  }
  50% {
    box-shadow:  5em -3em #535353, 6em -3em #535353, 7em -3em #535353, 8em -3em #535353;
  }
}
@keyframes mouth {
  0% {
    box-shadow:  6em -4em #535353, 7em -4em #535353, 8em -4em #535353;
  }
  50% {
    box-shadow:  5em -3em #535353, 6em -3em #535353, 7em -3em #535353, 8em -3em #535353;
  }
}
@-webkit-keyframes comets {
  0% {
    box-shadow:  -23em -23em #535353,  -20em -20em #535353,  -18em -18em #535353,  -17em -17em #535353,  -16em -16em #535353,  -15em -15em #535353,  -13em -14em #535353, -12em -14em #535353, -11em -14em #535353,  -14em -13em #535353, -13em -13em #535353, -12em -13em #535353, -11em -13em #535353, -10em -13em #535353,  -14em -12em #535353, -13em -12em #535353, -11em -12em #535353, -10em -12em #535353,  -14em -11em #535353, -13em -11em #535353, -12em -11em #535353, -11em -11em #535353, -10em -11em #535353,  -13em -10em #535353, -12em -10em #535353, -11em -10em #535353,  -9em -19em #535353,  -8em -18em #535353,  -7em -17em #535353,  -6em -16em #535353, -5em -16em #535353,  -6em -15em #535353, -5em -15em #535353;
  }
  33% {
    box-shadow:  -24em -24em #535353,  -21em -21em #535353,  -18em -18em #535353,  -17em -17em #535353,  -16em -16em #535353, ...