Just some practice creating a character from parts and animating them.

index.html

<div class="dude">
  <div class="hip">
  <div class="torso">
    <div class="head"></div>
    
    <div class="limb rt up">
      <div class="limb dn"></div>
    </div>
    
    <div class="limb lt up">
      <div class="limb dn"></div>
    </div>
  </div>  
  
    <div class="limb ham rt "></div>
    <div class="limb ham lt"></div>
  </div>
</div>


<audio controls="controls"  autoplay="autoplay" style="visibility:hidden">
    <source src="http://au.hk.9you.com/music/29.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

style.less

.dude { margin: 130px auto 0; max-width: 200px; }

.head {
  background: url(http://i.imgur.com/R8Tqq.png) no-repeat; 
  height: 113px; width: 113px; 
  position: absolute; margin-left: -56px; margin-top: -100px;
  left: 0; top: 0; z-index: 2;
  
  &:before, &:after {
   content: ''; background: #000;
    display: block; height: 6px; width: 6px;
    border-radius: 3px; position: absolute;
    top: 60px;
  }
  
  &:after { left: 80px; }
}

.torso {
  background: url(http://i.imgur.com/wY5EX.png) no-repeat; 
  height: 87px;  width: 48px;
  animation: sway alternate 1s infinite; 
  transform-origin: 50% 80px;
  position: absolute; left: -3px; top: -60px;
}

.hip {
    background: url(http://i.imgur.com/kEpXH.png) no-repeat;
  width: 46px; height: 31px;
  position: relative; top: 50px; left: 2px;
  animation: hip-sway 2s infinite; 
  
  .ham {
    top: 26px;
    animation: leg-sway 1s alternate linear   infinite; 
    
    &.rt { left: 4px; }
    &.lt { left: 38px; }
  }
}

.limb {
  background: url(http://i.imgur.com/ItSuO.png) no-repeat; 
  height: 40px; position: absolute; width: 4px;
  transform-origin: 50% 2px; 
  
  &.up { 
    top: 15px; 
    
    &.lt { 
      left: 23px;
      animation: upper-wave-l 2s infinite;    
      .dn { animation: lower-wave-l 2s linear infinite; }
    }
    &.rt { 
      left: 3px; 
      animation: upper-wave-r 2s infinite;    
      .dn { animation: lower-wave-r 2s linear infinite; }
    }
    
    .dn { top: 37px; }
  }    
  
  @keyframes upper-wave-r {
    0% { transform: rotateZ(55deg) }
    50% { transform: rotateZ(115deg) }
    100% { transform: rotateZ(55deg) }
  }
  
  @keyframes lower-wave-r {
    0% { transform: rotateZ(45deg) } 
    20% { transform: rotateZ(55deg) }
    50% { transform: rotateZ(-45deg) }
    75% { transform: rotateZ(-35deg) }
    100% { transform: rotateZ(45deg)}
  }
  
  @keyframes upper-wave-l {
    0% { transform: rotateZ(-115deg) } 
    50% { transform: rotateZ(-55deg) }
    100% { transform: rotateZ(-115deg) }
  }
  
  @keyframes lower-wave-l {
    0% { transform: rotateZ(-45deg) } 
    20% { transform: rotateZ(35deg) }
    50% { transform: rotateZ(45deg) }
    75% { transform: rotateZ(-55deg) }
    100% { transform: rotateZ(-45deg)}
  }
  
  @keyframes sway {
    0% { transform: rotateZ(10deg) } 
    100% { transform: rotateZ(-5deg)}
  }
  
  @keyframes hip-sway {
    0% { transform: translateX(0px) } 
    50% { transform: translateX(10px) }
    100% { transform: translateX(0px)}
  }
  
  @keyframes leg-sway {
    0% { transform: rotateZ(-10deg) } 
    100% { transform: rotateZ(5deg)}
  }
  
}