Here you go, check the DEMO
#badBox1{
max-height: 21%;
max-width: 21%;
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%;}
75% { left:70%;}
85% { left:80%;top:48%; }
90% { left:82%;top:65%; }
95% { left:82%;top:65%;}
100% { left:82%;top:65%;}
}
Don't give 'margin-top' in keyframes if you haven't defined it in its parent CSS. Like in '#badBox1' CSS you defined 'top: 48%;' then you should further work upon the same value so that the 'top: 48%;' in order to move vertically down changes to 'top: 65%';
And you can define as many keyframe percentages as you want and also keep changing the animation duration accordingly to adjust them. Percentages refer to where you want the change(animation) to take place for a particular element.