div {position: absolute;  background: #78C485;}

#shape {
  width: 240px;
  height: 160px;
  top:240px;
  border-radius: 0;
  border-radius: 60% 20% 80% 20%;
  background: #629E69;
  z-index: 9;
}

#head {
  width: 120px;
  height: 90px;
  top:260px;
  margin-left: 218px;
  border-radius: 0;
  border-radius: 80% 60% 50% 20%;
}


#shape2 {
  width: 120px;
  height: 120px;
  top:320px;
  left:200px;
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

#shape3 {
  width: 120px;
  height: 120px;
  top:320px;
  left:200px;
  margin-left:120px;
  
}

/* animation test */


#shape, #head {
  -webkit-animation: move 6s cubic-bezier(.14, .75, .2, 1.01) infinite;
  -moz-animation: move 6s cubic-bezier(.14, .75, .2, 1.01) infinite;
  animation: move 6s cubic-bezier(.14, .75, .2, 1.01) infinite;
}

#shape2, #shape3 {
  -webkit-animation: walk 6s cubic-bezier(.14, .75, .2, 1.01) infinite;
  -moz-animation: walk 6s cubic-bezier(.14, .75, .2, 1.01) infinite;
  animation: walk 6s cubic-bezier(.14, .75, .2, 1.01) infinite;
}

@-webkit-keyframes walk {
  
}
@-moz-keyframes walk {
  
}
@keyframes walk {
  0% {left:20%%;border-radius:0 0 0 0;}
  10% {left:25%;border-radius:50% 10% 100% 10%;}
  20% {left:30%;border-radius:0% 50% 10% 100%;}
  30% {left:35%;border-radius:50% 10% 100% 10%;}
  40% {left:40%;border-radius:0% 50% 10% 100%;}
  50% {left:45%;border-radius:50% 10% 100% 10%;}
  60% {left:50%;border-radius:0% 50% 10% 100%;}
  70% {left:55%;border-radius:50% 10% 100% 10%;}
  80% {left:60%;border-radius:0% 50% 10% 100%;}
  90% {left:65%;border-radius:50% 10% 100% 10%;}
  100% {left:70%;border-radius:0% 50% 10% 100%;}
}

@-webkit-keyframes move {
  
}
@-moz-keyframes move {
  
}
@keyframes move {
  0% {left:20%%;}
  10% {left:25%;}
  20% {left:30%;}
  30% {left:35%;}
  40% {left:40%;}
  50% {left:45%;}
  60% {left:50%;}
  70% {left:55%;}
  80% {left:60%;}
  90% {left:65%;}
  100% {left:70%;}
}