enemy.css

.enemy
{
  position:absolute;
  display:block;
  top:0px;
  left:0px;
  width:64px;
  height:64px;
  margin:0px;
  font-size:0px;
  z-index:900;
}

.enemy .body
{
  position:relative;
  overflow:hidden;
  display:inline-block;
  top:27%;
  left:15%;
  width:59%;
  height:59%;
  background-color:#4a3632;
  border-radius:50% 50% 0% 0%;
}

.enemy.walk.right .body
{
  transform:rotate(5deg);
}

.enemy.walk.left .body
{
  transform:rotate(-5deg);
}

.enemy .eye
{
  position:relative;
  overflow:hidden;
  display:inline-block;
  top:34%;
  left:23%;
  width:52%;
  height:52%;
  background-color:#dd4e54;
  border-radius:50% 50%;
}

.enemy .iris
{
  position:relative;
  overflow:hidden;
  display:inline-block;
  top:40%;
  left:40%;
  width:20%;
  height:20%;
  background-color:#fff;
  border-radius:50% 50%;
}

.enemy.right .iris
{
  left:65%;
}

.enemy.left .iris
{
  left:15%;
}

.enemy.jump .iris
{
  top:15%;
}

.enemy.fall .iris
{
  top:70%;
}

@keyframes enemy_blink
{
  0% { height:0%; }
  46% { height:0%; }
  50% { height:36%; }
  54% { height:0%; }
  100% { height:0%; }
}

.enemy .eyelid
{
  position:absolute;
  overflow:hidden;
  display:inline-block;
  top:43%;
  left:24%;
  width:36%;
  height:0%;
  background-color:#4a3632;
  border-radius:50% 50%;

  animation-name:enemy_blink;
  animation-duration:5s;
  animation-iteration-count:infinite;
}

.enemy .leg
{
  position:absolute;
  overflow:hidden;
  display:inline-block;
  top:60%;
  width:10%;
  height:42%;
  background-color:#4a3632;
  border-radius:0% 0% 25% 25%;
  z-index:-1;
  transform-origin:50% 1%;
}

@keyframes enemy_right_walk
{
  0% { transform:rotate(0deg); }
  50% { transform:rotate(45deg); }
  100% { transform:rotate(0deg); }
}

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

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

.enemy.walk .leftleg
{
  animation-name:enemy_left_walk;
  animation-duration:0.5s;
  animation-iteration-count:infinite;
}

.enemy.walk .rightleg
{
  animation-name:enemy_right_walk;
  animation-duration:0.5s;
  animation-iteration-count:infinite;
}

.enemy.duck .body
{
  top:43%;
}

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

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

.enemy.duck.walk .leftleg
{
  top:75%;
}

.enemy.duck.walk .rightleg
{
  top:75%;
}

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