<!DOCTYPE html>
<html> 
  <head></head>
  <body>

    
    
    <div id="sheep">
      <div class="wool" id="wool">
      <div id="face">
        <div class="eyes"></div>
        <div class="eyes" id="eye1"></div>
        
      </div>
         <div class="legs" id="leg1"><div class="legs" id="leg2"></div></div>
    </div>
      
    
    </div>
    
   
   
    
    
      
    
    
    
    </body>
</html>
body {
  background-color:green;
  
  
}    

/*body*/
#wool {
      background: white;
      width: 100px;
      height: 100px;
      position: relative;
      text-align: center;
      transform: rotate(20deg);
      border-radius:30%;
    }
    #wool:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      height: 100px;
      width: 100px;
      background: white;
      transform: rotate(135deg);
      border-radius:30%;
      
    }

#face{
  
  background-color:black;
  border-radius:100%;
  height:50px;
  width:40px;
  position:absolute;
  margin-top:30px;
  margin-left:20px;
  
}

.eyes {
  
  border-radius:100%;
  background-color: pink;
  position:absolute; 
  margin-top:10px;
  margin-left:10px;
  height:5px;
  width:5px; 
  
}

#eye1 {
  
  margin-left:20px;
}

  
#leg1 {
  
  background-color:black; 
  border-radius: 20%;
  position:absolute;
  display:inline-block;
  height:40px;
  width:15px;
  margin-top:90px;
  margin-left:0px;
  animation-name:legs;
  animation-iteration-count:infinite;
  animation-duration:1s;
  
  
}


#leg2 {
  
  background-color:black; 
  border-radius: 20%;
  position:absolute;
  display:inline-block;
  height:40px;
  width:15px;
  margin-top:0px;
  margin-left:10px;
  animation-name:legs;
  animation-iteration-count:infinite;
  animation-duration:1s;
}




#sheep {
  display:flex; 
  align-items:end;
  animation-name:sheep; 
  animation-iteration-count:infinite; 
  animation-duration:5s;
  transition:transform; 
  transition-timing-function:ease-in;
 }
  


@keyframes legs {
  15% {
    
    transform:rotate(0deg);
  }
  25% {
    
    transform:rotate(15deg);
  }
  50% {
    
    transform:rotate(-30deg);
  }
  
}

@keyframes sheep {
  0% {
    transfrom:translate (0px,0px);
  }
  
  
  15% {
    
    transform:translate(0px,300px);
    
  }
  
  20% {
    transform:translate(300px,300px);
    
    
  }
  
  30% {
    
    transform:translate(300px,20px);
    
  }
  
  40% {
    
    transform:translate(300px,300px);
    
  }
  
  50% {
    
    transform:translate(800px,300px);
    
  }
  
  60% {
    
    transform:translate(800px,40px);
    
  }
  
  70% {
    
    transform:translate(800px, 300px);
    
  }
  
  80% {
    
    transform:translate(0px, 300px);
    
  }
  
  90% {
    
    transform:translate(0px,300px);
    
  }
  
  100% {
    
    transform:translate(0px,0px);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.