Animation -> balancier (skater)

HTML

<div id="admin">
    <div id="admin1">
    </div>
    <div id="admin2">
    </div>
  </div>
  
  
  <div id="modo">
    <div id="modo1">
    </div>
    <div id="modo2">
    </div>
  </div>

  <div id="homme">
    <div id="homme1">
    </div>
    <div id="homme2">
    </div>
  </div>

  <div id="femme">
    <div id="femme1">
    </div>
    <div id="femme2">
    </div>
  </div>

  
  
  
  
  
  
  
      <div id="shadowbox2">
<img src="http://www.heberger-image.fr/data/vignettes/11592_avatar_admin.png" alt="" title=""></div>

<br>

<br>
 <div id="shadowbox1">
    </div>
    <div id="shadowbox2">
<img src="http://www.heberger-image.fr/data/images/92198_avatar_modo.png" alt="" title=""></div>

<br>

<br>
 <div id="shadowbox1">
    </div>
    <div id="shadowbox2">
<img src="http://www.heberger-image.fr/data/vignettes/89671_avatar_femme.png" alt="" title=""></div>


<br>

<br>
 <div id="shadowbox1">
    </div>
    <div id="shadowbox2">
<img src="http://www.heberger-image.fr/data/images/34248_avatar_homme.png" alt="" title=""></div>

CSS

#admin{
      width:900px;
      margin:auto;
      padding-top:100px;
    }   
 
    #admin1{
      width:200px;
      height:100px;
      margin:100px 100px 100px 200px;
      float:left;
      background-color:#FF0000;
       
      -moz-border-radius:20px;
      -moz-box-shadow:0px 2px 2px 0px rgba(0, 0, 0, 0.5),
              0px 2px 2px 0px rgba(255, 255, 255, 0.5) inset;
      -webkit-border-radius:20px;
      -webkit-box-shadow:0px 2px 2px 0px rgba(0, 0, 0, 0.5),
                 0px 2px 2px 0px rgba(255, 255, 255, 0.5) inset;  
      border-radius:20px;
      box-shadow:0px 2px 2px 0px rgba(0, 0, 0, 0.5),
             0px 2px 2px 0px rgba(255, 255, 255, 0.5) inset;                 
    }
     
    #admin2{
      width:200px;
      height:100px;
      margin:100px 100px 100px 500px;
      background-color:#FF0000;
       
      -moz-border-radius:20px;
      -moz-box-shadow:0px 2px 2px 0px rgba(0, 0, 0, 0.5) inset,
              0px 2px 2px 0px rgba(255, 255, 255, 0.5);
      -webkit-border-radius:20px;
      -webkit-box-shadow:0px 2px 2px 0px rgba(0, 0, 0, 0.5) inset,
                 0px 2px 2px 0px rgba(255, 255, 255, 0.5);
      border-radius:20px;
      box-shadow:0px 2px 2px 0px rgba(0, 0, 0, 0.5) inset,
             0px 2px 2px 0px rgba(255, 255, 255, 0.5);              
    }
    #modo{
      width:900px;
      margin:auto;
      padding-top:100px;
    }   
    #modo1{
      width:200px;
      height:100px;
      margin:100px 100px 100px 200px;
      float:left;
      background-color:#00FF00;
       
      -moz-border-radius:20px;
      -moz-box-shadow:0px 2px 2px 0px rgba(0, 0, 0, 0.5),
              0px 2px 2px 0px rgba(255, 255, 255, 0.5) inset;
      -webkit-border-radius:20px;
      -webkit-box-shadow:0px 2px 2px 0px rgba(0, 0, 0, 0.5),
                 0px 2px 2px 0px rgba(255, 255, 255, 0.5) inset;  
      border-radius:20px;
      box-shadow:0px 2px 2px 0px rgba(0, 0, 0, 0.5),
             0px 2px 2px 0px rgba(255, 255, 255, 0.5) inset;  ...