Chrome Dinosaur Animation

HTML
<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, -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, -10em -20em #535353, -9em -19em #535353, -8em -18em #535353, -7em -17em #535353, -6em -16em #535353, -5em -16em #535353, -6em -15em #535353, -5em -15em #535353; } 66% { box-shadow: -26em -26em #535353, -22em -22em #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, -11em -21em #535353, -9em -19em #535353, -8em -18em #535353, -7em -17em #535353, -6em -16em #535353, -5em -16em #535353, -6em -15em #535353, -5em -15em #535353; } } @-moz-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, -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, -10em -20em #535353, -9em -19em #535353, -8em -18em #535353, -7em -17em #535353, -6em -16em #535353, -5em -16em #535353, -6em -15em #535353, -5em -15em #535353; } 66% { box-shadow: -26em -26em #535353, -22em -22em #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, -11em -21em #535353, -9em -19em #535353, -8em -18em #535353, -7em -17em #535353, -6em -16em #535353, -5em -16em #535353, -6em -15em #535353, -5em -15em #535353; } } @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, -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, -10em -20em #535353, -9em -19em #535353, -8em -18em #535353, -7em -17em #535353, -6em -16em #535353, -5em -16em #535353, -6em -15em #535353, -5em -15em #535353; } 66% { box-shadow: -26em -26em #535353, -22em -22em #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, -11em -21em #535353, -9em -19em #535353, -8em -18em #535353, -7em -17em #535353, -6em -16em #535353, -5em -16em #535353, -6em -15em #535353, -5em -15em #535353; } } @-webkit-keyframes ground { 0% { box-shadow: -12em 6em #535353, -11em 6em #535353, -10em 6em #535353, -9em 6em #535353, -8em 6em #535353, -7em 6em #535353, -6em 6em #535353, 4em 6em #535353, 5em 6em #535353, 6em 6em #535353, 7em 6em #535353, 8em 6em #535353, 9em 6em #535353, 10em 6em #535353, 11em 6em #535353, 12em 6em #535353, 8em 8em #535353, 9em 8em #535353, 10em 8em #535353, -7em 9em #535353, -6em 9em #535353, 6em 10em #535353, 7em 10em #535353, -10em 11em #535353, -9em 11em #535353; } 15% { box-shadow: -12em 6em #535353, -11em 6em #535353, -10em 6em #535353, -9em 6em #535353, -8em 6em #535353, -7em 6em #535353, -6em 6em #535353, 4em 6em #535353, 5em 6em #535353, 6em 6em #535353, 7em 6em #535353, 8em 6em #535353, 9em 6em #535353, 10em 6em #535353, 11em 6em #535353, 12em 6em #535353, 4em 8em #535353, 5em 8em #535353, 6em 8em #535353, -12em 9em #535353, -11em 9em #535353, 2em 10em #535353, 3em 10em #535353, 10em 11em #535353, 11em 11em #535353; } 30% { box-shadow: -12em 6em #535353, -11em 6em #535353, -10em 6em #535353, -9em 6em #535353, -8em 6em #535353, -7em 6em #535353, -6em 6em #535353, 4em 6em #535353, 5em 6em #535353, 6em 6em #535353, 7em 6em #535353, 8em 6em #535353, 9em 6em #535353, 10em 6em #535353, 11em 6em #535353, 12em 6em #535353, 0em 8em #535353, 1em 8em #535353, 2em 8em #535353, 8em 9em #535353, 9em 9em #535353, -2em 10em #535353, -1em 10em #535353, 6em 11em #535353, 7em 11em #535353; } 45% { box-shadow: -12em 6em #535353, -11em 6em #535353, -10em 6em #535353, -9em 6em #535353, -8em 6em #535353, -7em 6em #535353, -6em 6em #535353, 4em 6em #535353, 5em 6em #535353, 6em 6em #535353, 7em 6em #535353, 8em 6em #535353, 9em 6em #535353, 10em 6em #535353, 11em 6em #535353, 12em 6em #535353, -4em 8em #535353, -3em 8em #535353, -2em 8em #535353, 4em 9em #535353, 5em 9em #535353, -6em 10em #535353, -5em 10em #535353, 2em 11em #535353, 3em 11em #535353; } 60% { box-shadow: -12em 6em #535353, -11em 6em #535353, -10em 6em #535353, -9em 6em #535353, -8em 6em #535353, -7em 6em #535353, -6em 6em #535353, 4em 6em #535353, 5em 6em #535353, 6em 6em #535353, 7em 6em #535353, 8em 6em #535353, 9em 6em #535353, 10em 6em #535353, 11em 6em #535353, 12em 6em #535353, -8em 8em #535353, -7em 8em #535353, -6em 8em #535353, 0em 9em #535353, 1em 9em #535353, -10em 10em #535353, -9em 10em #535353, -2em 11em #535353, -1em 11em #535353; } 75% { box-shadow: -12em 6em #535353, -11em 6em #535353, -10em 6em #535353, -9em 6em #535353, -8em 6em #535353, -7em 6em #535353, -6em 6em #535353, 4em 6em #535353, 5em 6em #535353, 6em 6em #535353, 7em 6em #535353, 8em 6em #535353, 9em 6em #535353, 10em 6em #535353, 11em 6em #535353, 12em 6em #535353, -12em 8em #535353, -11em 8em #535353, -10em 8em #535353, -4em 9em #535353, -3em 9em #535353, 10em 10em #535353, 11em 10em #535353, -6em 11em #535353, -5em 11em #535353; } } @-moz-keyframes ground { 0% { box-shadow: -12em 6em #535353, -11em 6em #535353, -10em 6em #535353, -9em 6em #535353, -8em 6em #535353, -7em 6em #535353, -6em 6em #535353, 4em 6em #535353, 5em 6em #535353, 6em 6em #535353, 7em 6em #535353, 8em 6em #535353, 9em 6em #535353, 10em 6em #535353, 11em 6em #535353, 12em 6em #535353, 8em 8em #535353, 9em 8em #535353, 10em 8em #535353, -7em 9em #535353, -6em 9em #535353, 6em 10em #535353, 7em 10em #535353, -10em 11em #535353, -9em 11em #535353; } 15% { box-shadow: -12em 6em #535353, -11em 6em #535353, -10em 6em #535353, -9em 6em #535353, -8em 6em #535353, -7em 6em #535353, -6em 6em #535353, 4em 6em #535353, 5em 6em #535353, 6em 6em #535353, 7em 6em #535353, 8em 6em #535353, 9em 6em #535353, 10em 6em #535353, 11em 6em #535353, 12em 6em #535353, 4em 8em #535353, 5em 8em #535353, 6em 8em #535353, -12em 9em #535353, -11em 9em #535353, 2em 10em #535353, 3em 10em #535353, 10em 11em #535353, 11em 11em #535353; } 30% { box-shadow: -12em 6em #535353, -11em 6em #535353, -10em 6em #535353, -9em 6em #535353, -8em 6em #535353, -7em 6em #535353, -6em 6em #535353, 4em 6em #535353, 5em 6em #535353, 6em 6em #535353, 7em 6em #535353, 8em 6em #535353, 9em 6em #535353, 10em 6em #535353, 11em 6em #535353, 12em 6em #535353, 0em 8em #535353, 1em 8em #535353, 2em 8em #535353, 8em 9em #535353, 9em 9em #535353, -2em 10em #535353, -1em 10em #535353, 6em 11em #535353, 7em 11em #535353; } 45% { box-shadow: -12em 6em #535353, -11em 6em #535353, -10em 6em #535353, -9em 6em #535353, -8em 6em #535353, -7em 6em #535353, -6em 6em #535353, 4em 6em #535353, 5em 6em #535353, 6em 6em #535353, 7em 6em #535353, 8em 6em #535353, 9em 6em #535353, 10em 6em #535353, 11em 6em #535353, 12em 6em #535353, -4em 8em #535353, -3em 8em #535353, -2em 8em #535353, 4em 9em #535353, 5em 9em #535353, -6em 10em #535353, -5em 10em #535353, 2em 11em #535353, 3em 11em #535353; } 60% { box-shadow: -12em 6em #535353, -11em 6em #535353, -10em 6em #535353, -9em 6em #535353, -8em 6em #535353, -7em 6em #535353, -6em 6em #535353, 4em 6em #535353, 5em 6em #535353, 6em 6em #535353, 7em 6em #535353, 8em 6em #535353, 9em 6em #535353, 10em 6em #535353, 11em 6em #535353, 12em 6em #535353, -8em 8em #535353, -7em 8em #535353, -6em 8em #535353, 0em 9em #535353, 1em 9em #535353, -10em 10em #535353, -9em 10em #535353, -2em 11em #535353, -1em 11em #535353; } 75% { box-shadow: -12em 6em #535353, -11em 6em #535353, -10em 6em #535353, -9em 6em #535353, -8em 6em #535353, -7em 6em #535353, -6em 6em #535353, 4em 6em #535353, 5em 6em #535353, 6em 6em #535353, 7em 6em #535353, 8em 6em #535353, 9em 6em #535353, 10em 6em #535353, 11em 6em #535353, 12em 6em #535353, -12em 8em #535353, -11em 8em #535353, -10em 8em #535353, -4em 9em #535353, -3em 9em #535353, 10em 10em #535353, 11em 10em #535353, -6em 11em #535353, -5em 11em #535353; } } @keyframes ground { 0% { box-shadow: -12em 6em #535353, -11em 6em #535353, -10em 6em #535353, -9em 6em #535353, -8em 6em #535353, -7em 6em #535353, -6em 6em #535353, 4em 6em #535353, 5em 6em #535353, 6em 6em #535353, 7em 6em #535353, 8em 6em #535353, 9em 6em #535353, 10em 6em #535353, 11em 6em #535353, 12em 6em #535353, 8em 8em #535353, 9em 8em #535353, 10em 8em #535353, -7em 9em #535353, -6em 9em #535353, 6em 10em #535353, 7em 10em #535353, -10em 11em #535353, -9em 11em #535353; } 15% { box-shadow: -12em 6em #535353, -11em 6em #535353, -10em 6em #535353, -9em 6em #535353, -8em 6em #535353, -7em 6em #535353, -6em 6em #535353, 4em 6em #535353, 5em 6em #535353, 6em 6em #535353, 7em 6em #535353, 8em 6em #535353, 9em 6em #535353, 10em 6em #535353, 11em 6em #535353, 12em 6em #535353, 4em 8em #535353, 5em 8em #535353, 6em 8em #535353, -12em 9em #535353, -11em 9em #535353, 2em 10em #535353, 3em 10em #535353, 10em 11em #535353, 11em 11em #535353; } 30% { box-shadow: -12em 6em #535353, -11em 6em #535353, -10em 6em #535353, -9em 6em #535353, -8em 6em #535353, -7em 6em #535353, -6em 6em #535353, 4em 6em #535353, 5em 6em #535353, 6em 6em #535353, 7em 6em #535353, 8em 6em #535353, 9em 6em #535353, 10em 6em #535353, 11em 6em #535353, 12em 6em #535353, 0em 8em #535353, 1em 8em #535353, 2em 8em #535353, 8em 9em #535353, 9em 9em #535353, -2em 10em #535353, -1em 10em #535353, 6em 11em #535353, 7em 11em #535353; } 45% { box-shadow: -12em 6em #535353, -11em 6em #535353, -10em 6em #535353, -9em 6em #535353, -8em 6em #535353, -7em 6em #535353, -6em 6em #535353, 4em 6em #535353, 5em 6em #535353, 6em 6em #535353, 7em 6em #535353, 8em 6em #535353, 9em 6em #535353, 10em 6em #535353, 11em 6em #535353, 12em 6em #535353, -4em 8em #535353, -3em 8em #535353, -2em 8em #535353, 4em 9em #535353, 5em 9em #535353, -6em 10em #535353, -5em 10em #535353, 2em 11em #535353, 3em 11em #535353; } 60% { box-shadow: -12em 6em #535353, -11em 6em #535353, -10em 6em #535353, -9em 6em #535353, -8em 6em #535353, -7em 6em #535353, -6em 6em #535353, 4em 6em #535353, 5em 6em #535353, 6em 6em #535353, 7em 6em #535353, 8em 6em #535353, 9em 6em #535353, 10em 6em #535353, 11em 6em #535353, 12em 6em #535353, -8em 8em #535353, -7em 8em #535353, -6em 8em #535353, 0em 9em #535353, 1em 9em #535353, -10em 10em #535353, -9em 10em #535353, -2em 11em #535353, -1em 11em #535353; } 75% { box-shadow: -12em 6em #535353, -11em 6em #535353, -10em 6em #535353, -9em 6em #535353, -8em 6em #535353, -7em 6em #535353, -6em 6em #535353, 4em 6em #535353, 5em 6em #535353, 6em 6em #535353, 7em 6em #535353, 8em 6em #535353, 9em 6em #535353, 10em 6em #535353, 11em 6em #535353, 12em 6em #535353, -12em 8em #535353, -11em 8em #535353, -10em 8em #535353, -4em 9em #535353, -3em 9em #535353, 10em 10em #535353, 11em 10em #535353, -6em 11em #535353, -5em 11em #535353; } } @-webkit-keyframes dino { 0% { box-shadow: 2em -10em #535353, 3em -10em #535353, 4em -10em #535353, 5em -10em #535353, 6em -10em #535353, 7em -10em #535353, 8em -10em #535353, 9em -10em #535353, 1em -9em #535353, 2em -9em #535353, 4em -9em #535353, 5em -9em #535353, 6em -9em #535353, 7em -9em #535353, 8em -9em #535353, 9em -9em #535353, 10em -9em #535353, 1em -8em #535353, 2em -8em #535353, 3em -8em #535353, 4em -8em #535353, 5em -8em #535353, 6em -8em #535353, 7em -8em #535353, 8em -8em #535353, 9em -8em #535353, 10em -8em #535353, 1em -7em #535353, 2em -7em #535353, 3em -7em #535353, 4em -7em #535353, 5em -7em #535353, 6em -7em #535353, 7em -7em #535353, 8em -7em #535353, 9em -7em #535353, 10em -7em #535353, 1em -6em #535353, 2em -6em #535353, 3em -6em #535353, 4em -6em #535353, 5em -6em #535353, 6em -6em #535353, 7em -6em #535353, 8em -6em #535353, 9em -6em #535353, 10em -6em #535353, 1em -5em #535353, 2em -5em #535353, 3em -5em #535353, 4em -5em #535353, 5em -5em #535353, 0em -4em #535353, 1em -4em #535353, 2em -4em #535353, 3em -4em #535353, 4em -4em #535353, 5em -4em #535353, -9em -3em #535353, -3em -3em #535353, -2em -3em #535353, -1em -3em #535353, 0em -3em #535353, 1em -3em #535353, 2em -3em #535353, 3em -3em #535353, 4em -3em #535353, -9em -2em #535353, -2em -2em #535353, -1em -2em #535353, 0em -2em #535353, 1em -2em #535353, 2em -2em #535353, 3em -2em #535353, 4em -2em #535353, -9em -1em #535353, -8em -1em #535353, -3em -1em #535353, -2em -1em #535353, -1em -1em #535353, 0em -1em #535353, 1em -1em #535353, 2em -1em #535353, 3em -1em #535353, 4em -1em #535353, 5em -1em #535353, 6em -1em #535353, -9em 0em #535353, -8em 0em #535353, -7em 0em #535353, -4em 0em #535353, -3em 0em #535353, -2em 0em #535353, -1em 0em #535353, 0em 0em #535353, 1em 0em #535353, 2em 0em #535353, 3em 0em #535353, 4em 0em #535353, 6em 0em #535353, -9em 1em #535353, -8em 1em #535353, -7em 1em #535353, -6em 1em #535353, -5em 1em #535353, -4em 1em #535353, -3em 1em #535353, -2em 1em #535353, -1em 1em #535353, 0em 1em #535353, 1em 1em #535353, 2em 1em #535353, 3em 1em #535353, 4em 1em #535353, -8em 2em #535353, -7em 2em #535353, -6em 2em #535353, -5em 2em #535353, -4em 2em #535353, -3em 2em #535353, -2em 2em #535353, -1em 2em #535353, 0em 2em #535353, 1em 2em #535353, 2em 2em #535353, 3em 2em #535353, 4em 2em #535353, -7em 3em #535353, -6em 3em #535353, -5em 3em #535353, -4em 3em #535353, -3em 3em #535353, -2em 3em #535353, -1em 3em #535353, 0em 3em #535353, 1em 3em #535353, 2em 3em #535353, 3em 3em #535353, -6em 4em #535353, -5em 4em #535353, -4em 4em #535353, -3em 4em #535353, -2em 4em #535353, -1em 4em #535353, 0em 4em #535353, 1em 4em #535353, 2em 4em #535353, -5em 5em #535353, -4em 5em #535353, -3em 5em #535353, -2em 5em #535353, -1em 5em #535353, 0em 5em #535353, 1em 5em #535353, -4em 6em #535353, -3em 6em #535353, 0em 6em #535353, 1em 6em #535353, -3em 7em #535353, -2em 7em #535353, 1em 7em #535353, 1em 8em #535353, 1em 9em #535353, 2em 9em #535353; } 50% { box-shadow: 2em -10em #535353, 3em -10em #535353, 4em -10em #535353, 5em -10em #535353, 6em -10em #535353, 7em -10em #535353, 8em -10em #535353, 9em -10em #535353, 1em -9em #535353, 2em -9em #535353, 4em -9em #535353, 5em -9em #535353, 6em -9em #535353, 7em -9em #535353, 8em -9em #535353, 9em -9em #535353, 10em -9em #535353, 1em -8em #535353, 2em -8em #535353, 3em -8em #535353, 4em -8em #535353, 5em -8em #535353, 6em -8em #535353, 7em -8em #535353, 8em -8em #535353, 9em -8em #535353, 10em -8em #535353, 1em -7em #535353, 2em -7em #535353, 3em -7em #535353, 4em -7em #535353, 5em -7em #535353, 6em -7em #535353, 7em -7em #535353, 8em -7em #535353, 9em -7em #535353, 10em -7em #535353, 1em -6em #535353, 2em -6em #535353, 3em -6em #535353, 4em -6em #535353, 5em -6em #535353, 6em -6em #535353, 7em -6em #535353, 8em -6em #535353, 9em -6em #535353, 10em -6em #535353, 1em -5em #535353, 2em -5em #535353, 3em -5em #535353, 4em -5em #535353, 5em -5em #535353, -3em -4em #535353, -2em -4em #535353, 0em -4em #535353, 1em -4em #535353, 2em -4em #535353, 3em -4em #535353, 4em -4em #535353, 5em -4em #535353, -9em -3em #535353, -2em -3em #535353, -1em -3em #535353, 0em -3em #535353, 1em -3em #535353, 2em -3em #535353, 3em -3em #535353, 4em -3em #535353, -9em -2em #535353, -2em -2em #535353, -1em -2em #535353, 0em -2em #535353, 1em -2em #535353, 2em -2em #535353, 3em -2em #535353, 4em -2em #535353, -9em -1em #535353, -8em -1em #535353, -3em -1em #535353, -2em -1em #535353, -1em -1em #535353, 0em -1em #535353, 1em -1em #535353, 2em -1em #535353, 3em -1em #535353, 4em -1em #535353, -9em 0em #535353, -8em 0em #535353, -7em 0em #535353, -4em 0em #535353, -3em 0em #535353, -2em 0em #535353, -1em 0em #535353, 0em 0em #535353, 1em 0em #535353, 2em 0em #535353, 3em 0em #535353, 4em 0em #535353, 5em 0em #535353, 6em 0em #535353, -9em 1em #535353, -8em 1em #535353, -7em 1em #535353, -6em 1em #535353, -5em 1em #535353, -4em 1em #535353, -3em 1em #535353, -2em 1em #535353, -1em 1em #535353, 0em 1em #535353, 1em 1em #535353, 2em 1em #535353, 3em 1em #535353, 4em 1em #535353, 6em 1em #535353, -8em 2em #535353, -7em 2em #535353, -6em 2em #535353, -5em 2em #535353, -4em 2em #535353, -3em 2em #535353, -2em 2em #535353, -1em 2em #535353, 0em 2em #535353, 1em 2em #535353, 2em 2em #535353, 3em 2em #535353, 4em 2em #535353, -7em 3em #535353, -6em 3em #535353, -5em 3em #535353, -4em 3em #535353, -3em 3em #535353, -2em 3em #535353, -1em 3em #535353, 0em 3em #535353, 1em 3em #535353, 2em 3em #535353, 3em 3em #535353, -6em 4em #535353, -5em 4em #535353, -4em 4em #535353, -3em 4em #535353, -2em 4em #535353, -1em 4em #535353, 0em 4em #535353, 1em 4em #535353, 2em 4em #535353, -5em 5em #535353, -4em 5em #535353, -3em 5em #535353, -2em 5em #535353, -1em 5em #535353, 0em 5em #535353, 1em 5em #535353, -4em 6em #535353, -3em 6em #535353, -2em 6em #535353, 1em 6em #535353, 2em 6em #535353, -4em 7em #535353, -3em 7em #535353, -4em 8em #535353, -4em 9em #535353, -3em 9em #535353; } } @-moz-keyframes dino { 0% { box-shadow: 2em -10em #535353, 3em -10em #535353, 4em -10em #535353, 5em -10em #535353, 6em -10em #535353, 7em -10em #535353, 8em -10em #535353, 9em -10em #535353, 1em -9em #535353, 2em -9em #535353, 4em -9em #535353, 5em -9em #535353, 6em -9em #535353, 7em -9em #535353, 8em -9em #535353, 9em -9em #535353, 10em -9em #535353, 1em -8em #535353, 2em -8em #535353, 3em -8em #535353, 4em -8em #535353, 5em -8em #535353, 6em -8em #535353, 7em -8em #535353, 8em -8em #535353, 9em -8em #535353, 10em -8em #535353, 1em -7em #535353, 2em -7em #535353, 3em -7em #535353, 4em -7em #535353, 5em -7em #535353, 6em -7em #535353, 7em -7em #535353, 8em -7em #535353, 9em -7em #535353, 10em -7em #535353, 1em -6em #535353, 2em -6em #535353, 3em -6em #535353, 4em -6em #535353, 5em -6em #535353, 6em -6em #535353, 7em -6em #535353, 8em -6em #535353, 9em -6em #535353, 10em -6em #535353, 1em -5em #535353, 2em -5em #535353, 3em -5em #535353, 4em -5em #535353, 5em -5em #535353, 0em -4em #535353, 1em -4em #535353, 2em -4em #535353, 3em -4em #535353, 4em -4em #535353, 5em -4em #535353, -9em -3em #535353, -3em -3em #535353, -2em -3em #535353, -1em -3em #535353, 0em -3em #535353, 1em -3em #535353, 2em -3em #535353, 3em -3em #535353, 4em -3em #535353, -9em -2em #535353, -2em -2em #535353, -1em -2em #535353, 0em -2em #535353, 1em -2em #535353, 2em -2em #535353, 3em -2em #535353, 4em -2em #535353, -9em -1em #535353, -8em -1em #535353, -3em -1em #535353, -2em -1em #535353, -1em -1em #535353, 0em -1em #535353, 1em -1em #535353, 2em -1em #535353, 3em -1em #535353, 4em -1em #535353, 5em -1em #535353, 6em -1em #535353, -9em 0em #535353, -8em 0em #535353, -7em 0em #535353, -4em 0em #535353, -3em 0em #535353, -2em 0em #535353, -1em 0em #535353, 0em 0em #535353, 1em 0em #535353, 2em 0em #535353, 3em 0em #535353, 4em 0em #535353, 6em 0em #535353, -9em 1em #535353, -8em 1em #535353, -7em 1em #535353, -6em 1em #535353, -5em 1em #535353, -4em 1em #535353, -3em 1em #535353, -2em 1em #535353, -1em 1em #535353, 0em 1em #535353, 1em 1em #535353, 2em 1em #535353, 3em 1em #535353, 4em 1em #535353, -8em 2em #535353, -7em 2em #535353, -6em 2em #535353, -5em 2em #535353, -4em 2em #535353, -3em 2em #535353, -2em 2em #535353, -1em 2em #535353, 0em 2em #535353, 1em 2em #535353, 2em 2em #535353, 3em 2em #535353, 4em 2em #535353, -7em 3em #535353, -6em 3em #535353, -5em 3em #535353, -4em 3em #535353, -3em 3em #535353, -2em 3em #535353, -1em 3em #535353, 0em 3em #535353, 1em 3em #535353, 2em 3em #535353, 3em 3em #535353, -6em 4em #535353, -5em 4em #535353, -4em 4em #535353, -3em 4em #535353, -2em 4em #535353, -1em 4em #535353, 0em 4em #535353, 1em 4em #535353, 2em 4em #535353, -5em 5em #535353, -4em 5em #535353, -3em 5em #535353, -2em 5em #535353, -1em 5em #535353, 0em 5em #535353, 1em 5em #535353, -4em 6em #535353, -3em 6em #535353, 0em 6em #535353, 1em 6em #535353, -3em 7em #535353, -2em 7em #535353, 1em 7em #535353, 1em 8em #535353, 1em 9em #535353, 2em 9em #535353; } 50% { box-shadow: 2em -10em #535353, 3em -10em #535353, 4em -10em #535353, 5em -10em #535353, 6em -10em #535353, 7em -10em #535353, 8em -10em #535353, 9em -10em #535353, 1em -9em #535353, 2em -9em #535353, 4em -9em #535353, 5em -9em #535353, 6em -9em #535353, 7em -9em #535353, 8em -9em #535353, 9em -9em #535353, 10em -9em #535353, 1em -8em #535353, 2em -8em #535353, 3em -8em #535353, 4em -8em #535353, 5em -8em #535353, 6em -8em #535353, 7em -8em #535353, 8em -8em #535353, 9em -8em #535353, 10em -8em #535353, 1em -7em #535353, 2em -7em #535353, 3em -7em #535353, 4em -7em #535353, 5em -7em #535353, 6em -7em #535353, 7em -7em #535353, 8em -7em #535353, 9em -7em #535353, 10em -7em #535353, 1em -6em #535353, 2em -6em #535353, 3em -6em #535353, 4em -6em #535353, 5em -6em #535353, 6em -6em #535353, 7em -6em #535353, 8em -6em #535353, 9em -6em #535353, 10em -6em #535353, 1em -5em #535353, 2em -5em #535353, 3em -5em #535353, 4em -5em #535353, 5em -5em #535353, -3em -4em #535353, -2em -4em #535353, 0em -4em #535353, 1em -4em #535353, 2em -4em #535353, 3em -4em #535353, 4em -4em #535353, 5em -4em #535353, -9em -3em #535353, -2em -3em #535353, -1em -3em #535353, 0em -3em #535353, 1em -3em #535353, 2em -3em #535353, 3em -3em #535353, 4em -3em #535353, -9em -2em #535353, -2em -2em #535353, -1em -2em #535353, 0em -2em #535353, 1em -2em #535353, 2em -2em #535353, 3em -2em #535353, 4em -2em #535353, -9em -1em #535353, -8em -1em #535353, -3em -1em #535353, -2em -1em #535353, -1em -1em #535353, 0em -1em #535353, 1em -1em #535353, 2em -1em #535353, 3em -1em #535353, 4em -1em #535353, -9em 0em #535353, -8em 0em #535353, -7em 0em #535353, -4em 0em #535353, -3em 0em #535353, -2em 0em #535353, -1em 0em #535353, 0em 0em #535353, 1em 0em #535353, 2em 0em #535353, 3em 0em #535353, 4em 0em #535353, 5em 0em #535353, 6em 0em #535353, -9em 1em #535353, -8em 1em #535353, -7em 1em #535353, -6em 1em #535353, -5em 1em #535353, -4em 1em #535353, -3em 1em #535353, -2em 1em #535353, -1em 1em #535353, 0em 1em #535353, 1em 1em #535353, 2em 1em #535353, 3em 1em #535353, 4em 1em #535353, 6em 1em #535353, -8em 2em #535353, -7em 2em #535353, -6em 2em #535353, -5em 2em #535353, -4em 2em #535353, -3em 2em #535353, -2em 2em #535353, -1em 2em #535353, 0em 2em #535353, 1em 2em #535353, 2em 2em #535353, 3em 2em #535353, 4em 2em #535353, -7em 3em #535353, -6em 3em #535353, -5em 3em #535353, -4em 3em #535353, -3em 3em #535353, -2em 3em #535353, -1em 3em #535353, 0em 3em #535353, 1em 3em #535353, 2em 3em #535353, 3em 3em #535353, -6em 4em #535353, -5em 4em #535353, -4em 4em #535353, -3em 4em #535353, -2em 4em #535353, -1em 4em #535353, 0em 4em #535353, 1em 4em #535353, 2em 4em #535353, -5em 5em #535353, -4em 5em #535353, -3em 5em #535353, -2em 5em #535353, -1em 5em #535353, 0em 5em #535353, 1em 5em #535353, -4em 6em #535353, -3em 6em #535353, -2em 6em #535353, 1em 6em #535353, 2em 6em #535353, -4em 7em #535353, -3em 7em #535353, -4em 8em #535353, -4em 9em #535353, -3em 9em #535353; } } @keyframes dino { 0% { box-shadow: 2em -10em #535353, 3em -10em #535353, 4em -10em #535353, 5em -10em #535353, 6em -10em #535353, 7em -10em #535353, 8em -10em #535353, 9em -10em #535353, 1em -9em #535353, 2em -9em #535353, 4em -9em #535353, 5em -9em #535353, 6em -9em #535353, 7em -9em #535353, 8em -9em #535353, 9em -9em #535353, 10em -9em #535353, 1em -8em #535353, 2em -8em #535353, 3em -8em #535353, 4em -8em #535353, 5em -8em #535353, 6em -8em #535353, 7em -8em #535353, 8em -8em #535353, 9em -8em #535353, 10em -8em #535353, 1em -7em #535353, 2em -7em #535353, 3em -7em #535353, 4em -7em #535353, 5em -7em #535353, 6em -7em #535353, 7em -7em #535353, 8em -7em #535353, 9em -7em #535353, 10em -7em #535353, 1em -6em #535353, 2em -6em #535353, 3em -6em #535353, 4em -6em #535353, 5em -6em #535353, 6em -6em #535353, 7em -6em #535353, 8em -6em #535353, 9em -6em #535353, 10em -6em #535353, 1em -5em #535353, 2em -5em #535353, 3em -5em #535353, 4em -5em #535353, 5em -5em #535353, 0em -4em #535353, 1em -4em #535353, 2em -4em #535353, 3em -4em #535353, 4em -4em #535353, 5em -4em #535353, -9em -3em #535353, -3em -3em #535353, -2em -3em #535353, -1em -3em #535353, 0em -3em #535353, 1em -3em #535353, 2em -3em #535353, 3em -3em #535353, 4em -3em #535353, -9em -2em #535353, -2em -2em #535353, -1em -2em #535353, 0em -2em #535353, 1em -2em #535353, 2em -2em #535353, 3em -2em #535353, 4em -2em #535353, -9em -1em #535353, -8em -1em #535353, -3em -1em #535353, -2em -1em #535353, -1em -1em #535353, 0em -1em #535353, 1em -1em #535353, 2em -1em #535353, 3em -1em #535353, 4em -1em #535353, 5em -1em #535353, 6em -1em #535353, -9em 0em #535353, -8em 0em #535353, -7em 0em #535353, -4em 0em #535353, -3em 0em #535353, -2em 0em #535353, -1em 0em #535353, 0em 0em #535353, 1em 0em #535353, 2em 0em #535353, 3em 0em #535353, 4em 0em #535353, 6em 0em #535353, -9em 1em #535353, -8em 1em #535353, -7em 1em #535353, -6em 1em #535353, -5em 1em #535353, -4em 1em #535353, -3em 1em #535353, -2em 1em #535353, -1em 1em #535353, 0em 1em #535353, 1em 1em #535353, 2em 1em #535353, 3em 1em #535353, 4em 1em #535353, -8em 2em #535353, -7em 2em #535353, -6em 2em #535353, -5em 2em #535353, -4em 2em #535353, -3em 2em #535353, -2em 2em #535353, -1em 2em #535353, 0em 2em #535353, 1em 2em #535353, 2em 2em #535353, 3em 2em #535353, 4em 2em #535353, -7em 3em #535353, -6em 3em #535353, -5em 3em #535353, -4em 3em #535353, -3em 3em #535353, -2em 3em #535353, -1em 3em #535353, 0em 3em #535353, 1em 3em #535353, 2em 3em #535353, 3em 3em #535353, -6em 4em #535353, -5em 4em #535353, -4em 4em #535353, -3em 4em #535353, -2em 4em #535353, -1em 4em #535353, 0em 4em #535353, 1em 4em #535353, 2em 4em #535353, -5em 5em #535353, -4em 5em #535353, -3em 5em #535353, -2em 5em #535353, -1em 5em #535353, 0em 5em #535353, 1em 5em #535353, -4em 6em #535353, -3em 6em #535353, 0em 6em #535353, 1em 6em #535353, -3em 7em #535353, -2em 7em #535353, 1em 7em #535353, 1em 8em #535353, 1em 9em #535353, 2em 9em #535353; } 50% { box-shadow: 2em -10em #535353, 3em -10em #535353, 4em -10em #535353, 5em -10em #535353, 6em -10em #535353, 7em -10em #535353, 8em -10em #535353, 9em -10em #535353, 1em -9em #535353, 2em -9em #535353, 4em -9em #535353, 5em -9em #535353, 6em -9em #535353, 7em -9em #535353, 8em -9em #535353, 9em -9em #535353, 10em -9em #535353, 1em -8em #535353, 2em -8em #535353, 3em -8em #535353, 4em -8em #535353, 5em -8em #535353, 6em -8em #535353, 7em -8em #535353, 8em -8em #535353, 9em -8em #535353, 10em -8em #535353, 1em -7em #535353, 2em -7em #535353, 3em -7em #535353, 4em -7em #535353, 5em -7em #535353, 6em -7em #535353, 7em -7em #535353, 8em -7em #535353, 9em -7em #535353, 10em -7em #535353, 1em -6em #535353, 2em -6em #535353, 3em -6em #535353, 4em -6em #535353, 5em -6em #535353, 6em -6em #535353, 7em -6em #535353, 8em -6em #535353, 9em -6em #535353, 10em -6em #535353, 1em -5em #535353, 2em -5em #535353, 3em -5em #535353, 4em -5em #535353, 5em -5em #535353, -3em -4em #535353, -2em -4em #535353, 0em -4em #535353, 1em -4em #535353, 2em -4em #535353, 3em -4em #535353, 4em -4em #535353, 5em -4em #535353, -9em -3em #535353, -2em -3em #535353, -1em -3em #535353, 0em -3em #535353, 1em -3em #535353, 2em -3em #535353, 3em -3em #535353, 4em -3em #535353, -9em -2em #535353, -2em -2em #535353, -1em -2em #535353, 0em -2em #535353, 1em -2em #535353, 2em -2em #535353, 3em -2em #535353, 4em -2em #535353, -9em -1em #535353, -8em -1em #535353, -3em -1em #535353, -2em -1em #535353, -1em -1em #535353, 0em -1em #535353, 1em -1em #535353, 2em -1em #535353, 3em -1em #535353, 4em -1em #535353, -9em 0em #535353, -8em 0em #535353, -7em 0em #535353, -4em 0em #535353, -3em 0em #535353, -2em 0em #535353, -1em 0em #535353, 0em 0em #535353, 1em 0em #535353, 2em 0em #535353, 3em 0em #535353, 4em 0em #535353, 5em 0em #535353, 6em 0em #535353, -9em 1em #535353, -8em 1em #535353, -7em 1em #535353, -6em 1em #535353, -5em 1em #535353, -4em 1em #535353, -3em 1em #535353, -2em 1em #535353, -1em 1em #535353, 0em 1em #535353, 1em 1em #535353, 2em 1em #535353, 3em 1em #535353, 4em 1em #535353, 6em 1em #535353, -8em 2em #535353, -7em 2em #535353, -6em 2em #535353, -5em 2em #535353, -4em 2em #535353, -3em 2em #535353, -2em 2em #535353, -1em 2em #535353, 0em 2em #535353, 1em 2em #535353, 2em 2em #535353, 3em 2em #535353, 4em 2em #535353, -7em 3em #535353, -6em 3em #535353, -5em 3em #535353, -4em 3em #535353, -3em 3em #535353, -2em 3em #535353, -1em 3em #535353, 0em 3em #535353, 1em 3em #535353, 2em 3em #535353, 3em 3em #535353, -6em 4em #535353, -5em 4em #535353, -4em 4em #535353, -3em 4em #535353, -2em 4em #535353, -1em 4em #535353, 0em 4em #535353, 1em 4em #535353, 2em 4em #535353, -5em 5em #535353, -4em 5em #535353, -3em 5em #535353, -2em 5em #535353, -1em 5em #535353, 0em 5em #535353, 1em 5em #535353, -4em 6em #535353, -3em 6em #535353, -2em 6em #535353, 1em 6em #535353, 2em 6em #535353, -4em 7em #535353, -3em 7em #535353, -4em 8em #535353, -4em 9em #535353, -3em 9em #535353; } } body { font-size: 7px; /* background-color: #dddddd; */ background-image: url("https://i.imgur.com/Xccdmky.gif") cover cover; } body > * { /* background: #535353; */ height: 0.5em; position: absolute; left: 50%; top: 50%; width: 0.5em; } .dino, .eye, .mouth { width: 1em; height: 1em; } .dino { -webkit-animation: dino 0.25s both steps(1) infinite; -moz-animation: dino 0.25s both steps(1) infinite; animation: dino 0.25s both steps(1) infinite; } .eye { -webkit-animation: eye 4s both steps(1) infinite; -moz-animation: eye 4s both steps(1) infinite; animation: eye 4s both steps(1) infinite; } .mouth { -webkit-animation: mouth 4s both steps(1) infinite; -moz-animation: mouth 4s both steps(1) infinite; animation: mouth 4s both steps(1) infinite; } .ground { -webkit-animation: ground 0.5s both steps(1) infinite; -moz-animation: ground 0.5s both steps(1) infinite; animation: ground 0.5s both steps(1) infinite; } .comets { -webkit-animation: comets 0.5s both steps(1) infinite; -moz-animation: comets 0.5s both steps(1) infinite; animation: comets 0.5s both steps(1) infinite; }
JAVASCRIPT
// #nojs
Expand for more options Login