CSSスライドショー（さまざまなスライド時間）

Question

スライドが表示される時間が変わるような、完全に機能するCSSスライドショーを作成できないようです。複数のキーフレームを使用する必要がありますか、それを行う別の方法はありますか？ ^はい

Answer 1

単一のキーフレームセットアップとCSS3のアニメーションプロパティを使用することができます。

（全長animation-durationで変更される）、また

（I画像や私はつかんストック写真をプリロードしないよので、各画像が表示される長さを設定周りのパーセンテージ開始点を移動します例を通して初めて少しビクビクすることができ、非常に大きいです。）

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-など）