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.