<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>
$beat: 2s;
$easeInQuint: cubic-bezier(0.755, 0.050, 0.855, 0.060); 



body {
  margin:3em;
}
.robot {
  position:relative;
  width: 350px;
  margin: auto;
}

.robot .head {
  position: absolute;
  left:105px;
  animation: headBop $beat/4 linear infinite;
  animation-play-state: paused;
}

.robot .body {
  position:absolute;
  z-index:1;
  top: 128px;
  left: 80px;
}

.robot .larm {
  position:absolute;
  z-index:100;
  transform-origin: 80% 10%;
  top: 132px;
  left:50px; 
  animation: arm-swing $beat/4 alternate infinite;
  animation-play-state:paused;
}

.robot .rarm {
  position: absolute;
  z-index:100;
  transform-origin:20% 10%; 
  top:132px;
  left: 240px;
  animation: arm-swing $beat/4 alternate-reverse infinite;
  animation-play-state:paused;
}

.robot .lfoot {
  position:absolute;
  top:270px;
  left:110px;
}

.robot .rfoot {
  position:absolute;
  top:270px;
  left:182px;
  animation: stomp $beat/2 reverse infinite;
  animation-play-state: paused;
}

.robot.playing * {
  animation-play-state: running;
}
  
@keyframes headBop {
  0% {transform: translateY(-5px);}
  30% {transform: translateY(0px);}
  30% {transform: translateY(-5px);}
  90% {transform: translateY(-10px);}
  100% {transform: translateY(-5px);}
}
 

@keyframes stomp {
  0% {transform: translateY(-8px);} 
  100% {transform: translateY(0px);}
}

@keyframes arm-swing {
  0% {transform: rotate(-30deg);}
  100% {transform: rotate(20deg);}    
}  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  




View Compiled
$(document).ready(function() {
    $('.robot').click(function() {
       $(this).toggleClass('playing');  
    });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js