style.css

*{
          margin: 0;
          padding: 0;
          box-sizing: border-box;
}
body{
          background-color: #ffd31d;
          height: 100vh;
          display: flex;
}
.container{
          margin: auto;
          width: 300px;
          height: 300px;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          align-items: center;
          position: relative;
}
.headChar{
          width: 50px;
          height: 50px;
          background-color: #ffffff;
          border-radius: 50%;
          position: relative;
          left: 35px;
          top: 20px;
          animation: headChange 1s infinite 1.6s ease-in;
}
.bodyChar{
          width: 40px;
          height: 100px;
          background-color: #ffffff;
          border-radius: 60px 10px 0 0;
          animation: bodyChange 1s infinite 1.6s ease-in;
}
.firstLeg, .secondLeg{
          width: 35px;
          height: 10px;
          background-color: #ffffff;
          position: relative;
          top: 55px;
          left: 20px;
          border-radius: 20px 50px 50px 20px;
          animation: walk 2s infinite linear;
}
.secondLeg{
          top: 25px;
          animation-delay: 1s;
}
.shadowChar{
          width: 100px;
          height: 10px;
          background-color: rgba(197, 82, 82, 0.2);
          border-radius: 50%;
           animation: shadowChange 1s infinite 1.6s linear;
}
@keyframes headChange{
          0%{
                   transform: translateY(0px);
          }
          50%{
                   transform: translateY(7px);     
          }
          100%{
                   transform: translateY(0px);                    
          }
}
@keyframes bodyChange{
          0%{
                   transform: translateY(0px);
          }
          50%{
                   transform: translateY(3px);     
          }
          100%{
                   transform: translateY(0px);                    
          }
}
@keyframes walk{
          0%{
                   transform: translateX(0px) rotate(0deg);
          }
          20%{
                  transform: translateX(-20px) rotate(0deg); 
          }
          40%{
                   transform: translate(-40px,0px) rotate(0deg);                    
          }
          60%{
                   transform: translate(-30px,-10px) rotate(35deg); 
          }
          90%{
                   transform: translate(10px,-7px) rotate(-35deg);     
          }
          100%{
                   transform: translateX(0px);                    
          }
         
}
@keyframes shadowChange{
          
          0%{
                    width: 100px;
          }
          50%{
                    width: 110px;
          }
          100%{
                    width: 100px;
          }
}