Animation -> balancier (skater)

HTML

<div id="main_simple">
    <div id="shadowbox1">
      <div class="pseudo_admin">cadre_simple d&eacute;mo</div>
    </div>
    <div id="shadowbox2">
	<div id="shadowbox3">effet creux</div>
    </div>
  </div>


  <div id="main_admin">
    <div id="admin1"><div class="pseudo_admin">Membre Admin</div>
    </div>
    <div id="admin2">
	<div id="admin3"><img src="http://www.heberger-image.fr/data/images/38060_avatar_admin.png" alt="" title="" /></div>
    </div>
  </div>


  <div id="main_modo">
    <div id="modo1"><div class="pseudo_admin">Membre Modo</div>
    </div>
    <div id="modo2">
	<div id="modo3"><img src="http://www.heberger-image.fr/data/images/15178_avatar_modo.png" alt="" title="" /></div>
    </div>
  </div>


  <div id="main_homme">
    <div id="homme1"><div class="pseudo_admin">Membre Homme</div>
    </div>
    <div id="homme2">
	<div id="homme3"><img src="http://www.heberger-image.fr/data/images/54995_avatar_homme.png" alt="" title="" /></div>
    </div>
  </div>



  <div id="main_femme">
    <div id="femme1"><div class="pseudo_admin">Membre Femme</div>
    </div>
    <div id="femme2">
	<div id="femme3"><img src="http://www.heberger-image.fr/data/images/20476_avatar_femme.png" alt="" title="" /></div>
    </div>
  </div>

CSS

#main_simple{
	background-color:#666666;
	display:inline-block;
	border:1px solid #000000;
	vertical-align:top;
	width:266px;
	height:180px;
	margin-bottom:10px;
    }   
 
     #main_admin{
	 background-color:#FF0000;
	display:inline-block;
	border:1px solid #000000;
	vertical-align:top;
	width:266px;
	height:180px;
	margin-bottom:10px;
    }   

     #main_modo{
	 background-color:#00FF00;
	display:inline-block;
	border:1px solid #000000;
	vertical-align:top;
	width:266px;
	height:180px;
	margin-bottom:10px;
    }   
 
     #main_homme{
	 background-color:#0000FF;
	display:inline-block;
	border:1px solid #000000;
	vertical-align:top;
	width:266px;
	height:180px;
	margin-bottom:10px;
    }   

     #main_femme{
	 background-color:#FF00FF;
	display:inline-block;
	border:1px solid #000000;
	vertical-align:top;
	width:266px;
	height:180px;
	margin-bottom:10px;
    }   









    #shadowbox1{
      width:214px;
      height:117px;
      margin:40px 100px 100px 18px;
      float:left;
      background-color:#777;
       
      -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;                 
    }
     
    #shadowbox2{
	position:relative;
      width:200px;
      height:100px;
      margin:50px 100px 100px 25px;
      background-color:#555;
	  text-align:center;       
      -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,...