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