CSS幻燈片（不同的幻燈片時間）

Question

我似乎無法做出完全正常工作的CSS幻燈片，其中幻燈片顯示的時間各不相同。我是否需要使用多個關鍵幀還是有另一種方法來完成它？如果是的話，一個解釋將不勝感激：^）

Answer 1

您可以使用一個關鍵幀設置和CSS3的動畫屬性。

要設置顯示在每個圖像的長度，左右移動的百分比起點（總長度被改變與animation-duration）

（而且，由於我沒有預載圖片和股票照片，我抓住了一個例子是相當大的，在第一時間通過可能有點緊張。）

div { 
 
    width: 500px; 
 
    height: 300px; 
 
    background-repeat: no-repeat; 
 
    background-size: contain; 
 
    background-position: center; 
 
    
 
    animation-duration: 10s; 
 
    animation-name: slideshow; 
 
    animation-iteration-count:infinite; 
 
} 
 

 
@keyframes slideshow { 
 
    0% { 
 
     /* Image 1 */ 
 
     background-image:url("https://static.pexels.com/photos/98046/pexels-photo-98046.jpeg"); 
 
    } 
 
    26% { 
 
     /* Image 1 */ 
 
     background-image:url("https://static.pexels.com/photos/98046/pexels-photo-98046.jpeg"); 
 
    } 
 
    30% { 
 
     /* Image 2 */ 
 
     background-image:url("https://static.pexels.com/photos/98050/pexels-photo-98050.jpeg"); 
 
    } 
 
    56% { 
 
     /* Image 2 */ 
 
     background-image:url("https://static.pexels.com/photos/98050/pexels-photo-98050.jpeg"); 
 
    } 
 
    60% { 
 
     /* Image 3 */ 
 
     background-image:url("https://static.pexels.com/photos/97909/pexels-photo-97909.jpeg"); 
 
    } 
 
    96% { 
 
     /* Image 3 */ 
 
     background-image:url("https://static.pexels.com/photos/97909/pexels-photo-97909.jpeg"); 
 
    } 
 
    100% { 
 
     /* Image 1 (For a smooth transition back to the start) */ 
 
     background-image:url("https://static.pexels.com/photos/98046/pexels-photo-98046.jpeg"); 
 
    } 
 
}

<div> 
 
    
 
</div>

（我已經在本例中離開了瀏覽器的屬性前綴爲了保持簡單，在生產中你可能會想要包含前綴：-webkit-，-moz-等）