CSS3 multiple animation (webkit keyframes) synching issue

Question

I am studying css3 animation... I have been trying to synch these boxes in equal speed for quite some time now. Here's My fiddle

Basically these are the codes for the 2 types of boxes Bad Box:

#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); }
}

GoodBox:

#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%; }
}

I was trying to manipulate the "-webkit-animation-duration"; and -webkit-animation-delay such that all the boxes would synch and have the same distance maintained in between them.

Can someone help me out?

PS:Synching Just the boxes...

SOLUTION: Here's my updated fiddle.. If anyone wants to see.

Answer 1

First try to factorize your code so that it's more clear and easy to debug. Add a "box" class to your boxes that will get the commons properties :

.box {
    max-height: 17%;
    max-width: 17%;
    z-index:10;  
    position: absolute;
    top: 52%;
    left: -8%;

    -webkit-animation-name:goodBox;
    -webkit-animation-duration: 7s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-fill-mode: forwards;
}

Do the same for the animation since all the good boxes have the same :

@-webkit-keyframes goodBox {
    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%; }
}

Then use the boxes ID only for delay :

#goodBox3 {
   -webkit-animation-delay: 4.5s;
}

Now for the tricky sync part, you will have to do some math so that everything is equally spit. The easiest way to hack around is to build the bad box animation with the same steps and same duration as the good one :

@-webkit-keyframes badBoxMoving1 {
    0%   {}
    65%  {}
    75%  {}
    80%  {}
    85%  {}
    100% {}
}

Obviously you will need different steps for the second part of the anim (once they have dropped), so your best bet is to use a second animation :

#badBox1{ 
    -webkit-animation-name:badBoxMoving1,badBoxMoving2; 
    -webkit-animation-duration: 7s,5s;
}

So now you are free to build whatever you want without worrying about sync.

If you build complex animation I would suggest you to use the GSAP library, that allow a high level of animations customization.