CSS animte背景图像问题

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 

使用这个形象，我需要显示像，http://jsfiddle.net/5pVr4/6/。我试过了，但对于我在本地主机上运行的url('../img/banner.png')特定图像，无法获取。

Answer 1

我想我解决了你的问题。您可以使用此代码，它可能会帮助您。我编辑了可以制作类似动画背景图像的代码。

CSS代码：

@-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