<div class="robot">
		<img src="https://dl.dropboxusercontent.com/u/1143870/workshops/robot%20imgs/body.svg" class="body" />
		<img src="https://dl.dropboxusercontent.com/u/1143870/workshops/robot%20imgs/left-arm.svg" class="larm" />
		<img src="https://dl.dropboxusercontent.com/u/1143870/workshops/robot%20imgs/right-arm.svg" class="rarm" />
 
 <img src="https://dl.dropboxusercontent.com/u/1143870/workshops/robot%20imgs/foot.svg" class="rfoot" />    
  <img src="https://dl.dropboxusercontent.com/u/1143870/workshops/robot%20imgs/foot.svg" class="lfoot" />    
  <img src="https://dl.dropboxusercontent.com/u/1143870/workshops/robot%20imgs/bob-head.svg" class="head"/>
	</div>
.robot {
  position:relative;
  width: 350px;
  margin: auto;
}

.robot .head {
  position: absolute;
  left:105px;
  animation: head 2s ease-in-out infinite;

}

.robot .body {
  position:absolute;
  z-index:1;
  top: 128px;
  left: 80px;
  animation: body 2s ease-in-out infinite;
 
}

.robot .larm {
  position:absolute;
  z-index:100;
  transform-origin: 80% 10%;
  top: 132px;
  left:50px;  
    
 
  animation: larm 4s ease-in-out infinite; 
  
}

.robot .rarm {
  position: absolute;
  z-index:100;
  transform-origin:20% 10%; 
  top:132px;
  left: 240px;
  
  
  animation: rarm 4s ease-in-out infinite;
}

.robot .lfoot {
  position:absolute;
  top:270px;
  left:110px;
  animation: lfoot 2s ease-in-out infinite;
}

.robot .rfoot {
  position:absolute;
  top:270px;
  left:182px;
  animation: rfoot 2s ease-in-out infinite;
}

@keyframes head {
 25% {transform: translateY(-10px);}
 50% {transform: translateY(10px);}
 75% {transform: translateY(-10px);}
 90% {transform: translateY(10px);}
 100%{transform: translateY(0px);}
    25%{transform: translateX(10px);}
    75%{transform: translateX(-10px);}
      25%{transform: rotate(10deg);}
      75%{transform: rotate(-10deg);}
            
}

@keyframes body {
 25% {transform: translateY(10px);}
 50% {transform: translateY(-10px);}
 75% {transform: translateY(10px);}
 90% {transform: translateY(-10px);}
 100%{transform: translateY(0px);}
    25%{transform: translateX(-10px);}
    75%{transform: translateX(10px);}
      25%{transform: rotate(-10deg);}
      75%{transform: rotate(10deg);}
}

@keyframes larm {
 25% {transform: translateY(10px);}
 50% {transform: translateY(-10px);}
      
      25%{transform: rotate(-80deg);}
      50%{transform: rotate(60deg);}
      75%{transform: rotate(180deg);}
      100%{transform: rotate(0deg);}  
}

@keyframes rarm {
 25% {transform: translateX(10px);}
 50% {transform: translateX(-10px);}
      25%{transform: rotate(-120deg);}
      50%{transform: rotate(60deg);}
      75%{transform: rotate(120deg);}
      100%{transform: rotate(0deg);}
}

@keyframes lfoot{
  25% {transform: translateY(-10px)}
  50% {transform: translateY(0px)}
  75% {transform: translateY(-10px)}
  100% {transform: translateY(0px)}
}

@keyframes rfoot{
  25% {transform:translateY(0px)}
  50% {transform:translateY(-10px)}
  75% {transform:translateY(0px)}
  95% {transform:translateY(-10px)}
  100% {transform:translateY(0px)}
}


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.