CSS3 animation (webkit keyframes) issue

Question

I am studying CSS3animation..

Am trying to move boxes and the issue occurs in the 3rd box(Bad Box) I have given the rest of the boxes having an animation of small delay's in between them.

Here's My Fiddle:

Here's the part of the code where the problem occurs:

#badBox1{ 
    max-height: 21%;
    max-width: 21%;
    position: absolute;
    top: 48%;
    left: -8%;
    -webkit-animation-name:badBox1Moving;
    -webkit-animation-duration: 6s;
    -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%;}
    80% { left:70%;}
    100% { margin-top:15%;}
}

Right now its moving a lil diagonally...

What i want is the 3rd box to go to the end of the 1st conveyer belt and move vertically down to the 2nd conveyer belt and stay there.

PS: There's also a piston image along with this,its not displaying in the fiddle though..

Answer 1

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.

Answer 2

What you can do is to be more precise when you define your keyframes. I've made a quick DEMO based on your code (I've left out the other boxes in this example). Since you have defined the animation-fill-mode to forwards, removing animation-iteration-count: infinite; will persist the end state, making the box stay on the second belt.

Here's the CSS code from my example:

#badBox1{ 
    max-height: 21%;
    max-width: 21%;
    position: absolute;
    top: 48%;
    left: -8%;
    -webkit-animation-name:badBox1Moving;
    -webkit-animation-duration: 6s;
    -webkit-animation-delay: 3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes badBox1Moving{
    0%   { left:-10%;}
    99%  { top:48%;}
    100% { left:81%; top:65%;}
}

Answer 3

Try this in your CSS

@-webkit-keyframes badBox1Moving {
    0% {
        left:-10%;
        top: 48%;
    }
    50% {
        left:75%;
        top: 48%;
    }
    75% {
        left: 75%;
        top: 60%;
    }
    100% {
        left: 75%;
        top: 60%;
    }
}

here is fiddle