CSS animte background image issue in html5 - css

Question

Html5:
<div id="slideshow">
<div id='animate-area'>
</div>
</div>
Css:
body {
margin: 0;
padding: 0;
}
#slideshow {
position: relative;
overflow: hidden;
height: 145px;
}
#animate-area {
height: 100%;
width: 2538px;
position: absolute;
left: 0;
top: 0;
background-image: url('../img/banner.png');
animation: animatedBackground 40s 5s linear infinite;
-ms-animation: animatedBackground 40s linear infinite;
-moz-animation: animatedBackground 40s linear infinite;
-webkit-animation: animatedBackground 30s 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; }
}
JSfiddle:
jsfiddle.net/cz04c4nx/1
Using this image, I need show like, http://jsfiddle.net/5pVr4/6/. I tried, but for my particular image url('../img/banner.png') when run in localhost, can't able to get.

Answer 1

I think i solved your problem. You can use this code and it may be help you.I edited that code which you can make similar animate background image.
CSS Code:
#-webkit-keyframes MOVE-BG {
from {
-webkit-transform: translateX(0);
}
to {
-webkit-transform: translateX(-550px);
}
}
#content {
height: 100px;
text-align: center;
font-size: 26px;
color: white;
position: relative;
overflow: hidden;
}
.bg{
position: absolute;
left: 0;
right: -550px;
top: 0;
bottom: 0;
background: url(http://s30.postimg.org/qnju89rkx/banner.png) 0% 0% repeat;
z-index: -1;
-webkit-animation-name: MOVE-BG;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
Live Working Demo