title: CSS3 multiple animation (webkit keyframes) synching issue
body: <p>I am  studying css3 animation...
  I have been trying to <strong>synch these boxes</strong> in equal speed for quite some time now.
  Here's <a href="http://jsfiddle.net/EJX6j/12/" rel="nofollow">My fiddle</a></p>
  
  <p>Basically these are the codes for the 2 types of boxes
  Bad Box:</p>
  
  <pre><code>#badBox1{ 
      max-height: 21%;
      max-width: 21%;
      z-index:10;
      position: absolute;
      top: 48%;
      left: -8%;
      -webkit-animation-name:badBox1Moving;
      -webkit-animation-duration: 8s;
      -webkit-animation-delay: 3s;
      -webkit-animation-timing-function: linear;
      -webkit-animation-iteration-count:infinite;
      -webkit-animation-fill-mode: forwards;
  }
  @-webkit-keyframes badBox1Moving{
      0%   { left:-10%;-webkit-transform: rotate(0deg);}
      50%  { left:60.5%;top:48%;}
      55%  { left:60.5%;top:66%;
             -webkit-transform: rotate(0deg); }
      60%  { left:57.5%;top:66%;
             -webkit-transform: rotate(0deg);}
      65%  { left:53%;top:66%;
             -webkit-transform: rotate(-5deg);}
      70%  { left:52%;top:67%;
             -webkit-transform: rotate(-15deg);}
      78%  {left:51%;top:68%;
            -webkit-transform: rotate(-25deg);}
      80%  { left:50%;top:69%;
             -webkit-transform: rotate(-35deg);}
      83%  { left:49%;top:70%;
             -webkit-transform: rotate(-40deg);}
      90%  { left:48%;top:71%;
             -webkit-transform: rotate(-55deg);
             opacity:1;}
      95%  {left:48%;top:72%;
            -webkit-transform: rotate(-65deg);
            opacity:0.5;}
      97%  {left:48%;top:72%;
            -webkit-transform: rotate(-75deg);
            opacity:0.3;}
      100% { left:48%;top:73%; opacity:0;
             -webkit-transform: rotate(-85deg); }
  }
  </code></pre>
  
  <p>GoodBox:</p>
  
  <pre><code>#goodBox1{
      max-height: 17%;
      max-width: 17%;
      position: absolute;
      z-index:10;
      top: 52%;
      left: -8%;
  
      -webkit-animation-name:goodBox1Moving;
      -webkit-animation-duration: 7s;
      -webkit-animation-timing-function: linear;
      -webkit-animation-iteration-count:infinite;
      -webkit-animation-fill-mode: forwards;
  }
  @-webkit-keyframes goodBox1Moving{
      0%   { left:-10%;}
      65%  { left:70%;}
      75%  { left:80%;top:52%; }
      80%  { left:82%;top:70%; }
      85%  { left:85%;top:70%; }
      100% { left:110%;top:70%; }
  }
  </code></pre>
  
  <p>I was trying to manipulate the <strong>"-webkit-animation-duration";</strong> and <strong>-webkit-animation-delay</strong> such that all the boxes would synch and have the same distance maintained in between them.</p>
  
  <p>Can someone help me out?</p>
  
  <p><strong>PS</strong>:<em>Synching Just the boxes...</em></p>
  
  <p><strong>SOLUTION</strong>: Here's <a href="http://jsfiddle.net/EJX6j/14/" rel="nofollow">my updated fiddle</a>..  If anyone wants to see.</p>