How to make distance for moving image in html5 - html

Question

This is what I tried:
css code:
body {
margin: 0;
padding: 0;
}
#slideshow {
position: relative;
overflow: hidden;
height: 100px;
}
#animate-area {
height: 100%;
width: 2538px;
position: absolute;
left: 0;
top: 0;
background-image: url('http://s10.postimg.org/noxw294zd/banner.png');
animation: animatedBackground 40s linear infinite;
-ms-animation: animatedBackground 40s linear infinite;
-moz-animation: animatedBackground 40s linear infinite;
-webkit-animation: animatedBackground 40s linear infinite;
}
/* Put your css in here */
#keyframes animatedBackground {
from { left: 0; }
to { left: -1269px; }
}
#-webkit-keyframes animatedBackground {
from { left: 0; }
to { left: -1269px; }
}
#-moz-keyframes animatedBackground {
from { left: 0; }
to { left: -1269px; }
}
Now what I need, every once rotational completed, then again start to move from right to left. I need some distance for every rotational completed.
Can somebody help to fix this?
Thanks in advance.
http://jsfiddle.net/6d6xa65n/4/

Answer 1

There isn't any delay between iterations in css3 other than animation-delay, which is used at the beginning, however you can use jQuery for delay. For direction from right to left change:
animation: animatedBackground 40s linear infinite alternate;
-ms-animation: animatedBackground 40s linear infinite alternate;
-moz-animation: animatedBackground 40s linear infinite alternate;
-webkit-animation: animatedBackground 40s linear infinite alternate;
If you want to add delay change to:
animation: animatedBackground 40s 5s linear infinite alternate;
-ms-animation: animatedBackground 40s 5s linear infinite alternate;
-moz-animation: animatedBackground 40s 5s linear infinite alternate;
-webkit-animation: animatedBackground 40s 5s linear infinite alternate;
Or add this, which will give you a delay at the end and beginning if you mean delay by "distance":
background-image: url('http://s10.postimg.org/noxw294zd/banner.png');
animation: animatedBackground 5s linear infinite alternate;
-ms-animation: animatedBackground 5s linear infinite alternate;
-moz-animation: animatedBackground 5s linear infinite alternate;
-webkit-animation: animatedBackground 5s linear infinite alternate;
}
/* Put your css in here */
#keyframes animatedBackground {
0% { left: 0; }
25% { left: 0; }
50% {left: -2000px;}
100% { left: -2000px; }
}
#-webkit-keyframes animatedBackground {
0% { left: 0; }
25% { left: 0; }
50% {left: -2000px;}
100% { left: -2000px; }
}
#-moz-keyframes animatedBackground {
0% { left: 0; }
25% { left: 0; }
50% {left: -2000px;}
100% { left: -2000px; }
}