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-等）