Beginning CSS3 animation at different points - css

Question

I have some code for moving a div constantly across the screen using CSS3, and what I want to do is start an animation I have written in CSS at different points in the animation (i.e., 20%) during the first animation cycle, and from then on begin each cycle at 0%. Thank you for your help, JSFiddle below.
HTML:
<div class="x1">
</div>
CSS:
.x1 {
right: 30%;
top: 90px;
-webkit-animation: animato 15s linear infinite;
-moz-animation: animato 15s linear infinite;
-o-animation: animato 15s linear infinite;
animation: animato 15s linear infinite;
}
#keyframes animato {
0% { right: -25%; }
20% { right: 0%; }
40% { right: 25%; }
60% { right: 50%; }
80% { right: 75%; }
100% { right: 100%; }
}
http://jsfiddle.net/ER287/
How would I begin animato at the 20% mark, say?

Answer 1

Use negative animation-delay:
.x1 {
right: 30%;
top: 90px;
-webkit-animation: animato 15s linear infinite;
-moz-animation: animato 15s linear infinite;
-o-animation: animato 15s linear infinite;
animation: animato 15s linear infinite;
-webkit-animation-delay: -3s; /* offsets the animation starting point for 3/15 = 20% */
-moz-animation-delay: -3s;
-o-animation-delay: -3s;
animation-delay: -3s;
}
fiddle