player.css

#player
{
  position:absolute;
  display:block;
  top:0px;
  left:0px;
  width:64px;
  height:64px;
  margin:0px;
  font-size:0px;
  z-index:1000;
}
#player .body
{
  position:relative;
  overflow:hidden;
  display:inline-block;
  top:27%;
  left:15%;
  width:59%;
  height:59%;
  background-color:#dd4e54;
  border-radius:15% 15%;
}
#player.walk.right .body
{
  transform:rotate(10deg);
}
#player.walk.left .body
{
  transform:rotate(-10deg);
}
#player .eye
{
  position:relative;
  overflow:hidden;
  display:inline-block;
  top:34%;
  left:23%;
  width:52%;
  height:52%;
  background-color:#fff;
  border-radius:50% 50%;
}
#player .iris
{
  position:relative;
  overflow:hidden;
  display:inline-block;
  top:40%;
  left:40%;
  width:20%;
  height:20%;
  background-color:#4b3733;
  border-radius:50% 50%;
}
#player.right .iris
{
  left:65%;
}

#player.left .iris
{
  left:15%;
}

#player.jump .iris
{
  top:15%;
}

#player.fall .iris
{
  top:70%;
}

@keyframes player_blink
{
  0% { height:0%; }
  46% { height:0%; }
  50% { height:53%; }
  54% { height:0%; }
  100% { height:0%; }
}

#player .eyelid
{
  position:absolute;
  overflow:hidden;
  display:inline-block;
  top:33%;
  left:23%;
  width:53%;
  height:0%;
  background-color:#dd4e54;
  border-radius:50% 50%;

  animation-name:player_blink;
  animation-duration:5s;
  animation-iteration-count:infinite;
}
#player .leg
{
  position:absolute;
  overflow:hidden;
  display:inline-block;
  top:60%;
  width:10%;
  height:42%;
  background-color:#dd4e54;
  border-radius:0% 0% 25% 25%;
  z-index:-1;
  transform-origin:50% 1%;
}

@keyframes player_right_walk
{
  0% { transform:rotate(0deg); }
  50% { transform:rotate(90deg); }
  100% { transform:rotate(0deg); }
}

@keyframes player_left_walk
{
  0% { transform:rotate(0deg); }
  50% { transform:rotate(-90deg); }
  100% { transform:rotate(0deg); }
}

#player .leftleg
{
  left:48%;
  transform:rotate(0deg);
}
#player .rightleg
{
  left:33%;
  transform:rotate(0deg);
}

#player.walk .leftleg
{
  animation-name:player_left_walk;
  animation-duration:0.5s;
  animation-iteration-count:infinite;
}

#player.walk .rightleg
{
  animation-name:player_right_walk;
  animation-duration:0.5s;
  animation-iteration-count:infinite;
}

#player.duck .body
{
  top:43%;
}

#player.duck .leftleg
{
  transform:rotate(-90deg);
  top:95%;
}

#player.duck .rightleg
{
  transform:rotate(90deg);
  top:95%;
}

#player.duck.walk .leftleg
{
  top:75%;
}

#player.duck.walk .rightleg
{
  top:75%;
}

#player.fall .rightleg
{
  transform:rotate(180deg);
  top:50%;
}

#player.fall .leftleg
{
  transform:rotate(180deg);
  top:50%;
}

#player.jump.right .leftleg
{
  transform:rotate(-90deg);
}

#player.jump.left .rightleg
{
  transform:rotate(90deg);
}

@keyframes player_bounce
{
  0% { margin-top:0%; }
  50% { margin-top:-0.5%; }
  100% { margin-top:0%; }
}
#player.walk
{
  animation-name:player_bounce;
  animation-duration:0.5s;
  animation-iteration-count:infinite;
}

@keyframes player_hurt
{
  0% { opacity:1; }
  50% { opacity:0.25; }
  100% { opacity:1; }
}
#player.hurt
{
  animation-name:player_hurt;
  animation-duration:0.25s;
  animation-iteration-count:infinite;
}