CSS關鍵幀幻燈片不工作的背景圖像

Question

使用第二個答案found here。我將我的圖像合併爲一個精靈，然後更新我的CSS以反映所提供的示例中的關鍵幀元素。精靈圖像（城堡）顯示，但幻燈片效果不會發生？我錯過了什麼？

樣品網址，主頁上的中心元素：http://216.157.26.175/cookiedouglas/

這裏是我的CSS：

.agentpress-pro-cookie .home-featured .widget { 
    /* background-color: rgba(255, 255, 255, 0.8); */ 
    background: url("http://216.157.26.175/cookiedouglas/wp-content/uploads/sites/58/2015/05/fort-myers-homes-for-sale.jpg"); 
    opacity: 0.95; 
     content: ''; 
    /* position: absolute; 
     width: 400%; 
     height: 100%; */ 
     z-index: -1; 
    /* background: url(http://placekitten.com/500/500/); Image is 500px by 500px, but only 200px by 50px is showing. */ 
     animation: slide 3s infinite; 
    } 
    @keyframes slide { 
     20% { 
      left: 0; 
     } 
     40%, 60% { 
      left: -50%; 
     } 
     80%, 100% { 
      left: -100%; 
     } 
    } 

Answer 1

使用瀏覽器（供應商）特定的前綴。

瀏覽器前綴用於添加新功能，這些功能可能不是正式規範的一部分，並且可以在尚未最終確定的規範中實現功能。

CSS3 animation是這些特徵中的一個。它支持不同瀏覽器。瀏覽器支持CSS3動畫可以檢查here。

從上面的鏈接可以明顯看出，使得上比IE和Firefox等瀏覽器的動畫作品，你MEED的-webkit-前綴。

此外，CSS離開屬性格式只適用於絕對定位的元素。

所以，你應該嘗試這樣（代碼段用於解釋讀取添加評論）：

/*visible portion of the larger 5120x680 pixel image*/ 
 
.widget { 
 
    width: 1024px; 
 
    height: 680px; 
 
    position: relative; 
 
    overflow: hidden; 
 
    border: 1px solid black; 
 
} 
 

 
.widget:before { 
 
    content: ''; 
 
    position: absolute; 
 
    /*needed for CSS left property to work*/ 
 
    width: 5120px; 
 
    height: 680px; 
 
    z-index: -1; 
 
    /*ExampleImageSprite.jpg is a 5120x680 pixel image which is a combination of 5 individual 1024x680 pixel images*/ 
 
    background: url("https://dl.dropboxusercontent.com/u/192824325/00_sandbox/30150865/ExampleImageSprite.jpg"); 
 
    -webkit-animation: slide 10s infinite; 
 
    animation: slide 10s infinite; 
 
} 
 

 
@-webkit-keyframes slide { 
 
    0% { 
 
    left: 0px; 
 
    } 
 
    20% { 
 
    left: -1024px; 
 
    } 
 
    40% { 
 
    left: -2048px; 
 
    } 
 
    60% { 
 
    left: -3072px; 
 
    } 
 
    80% { 
 
    left: -4096px; 
 
    } 
 
    100% { 
 
    left: -5120px; 
 
    } 
 
} 
 
@keyframes slide { 
 
    0% { 
 
    left: 0px; 
 
    } 
 
    20% { 
 
    left: -1024px; 
 
    } 
 
    40% { 
 
    left: -2048px; 
 
    } 
 
    60% { 
 
    left: -3072px; 
 
    } 
 
    80% { 
 
    left: -4096px; 
 
    } 
 
    100% { 
 
    left: -5120px; 
 
    } 
 
}

<div class=widget></div>