スクリプトなしで単一の要素の背景画像をクロスフェードする

Question

私は体の背景画像を定期的に切り替え、各画像間でクロスフェードしたいと思っています。 （とは対照的に

var images = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg"]; 
var current_image = 0; 
$(function() 
{ 
    var body = $("body"); 
    setTimeout(next, 10000); 

    function next() 
    { 
     current_image = (current_image + 1) % images.length; 
     body.css("background-image", "url('img/" + images[current_image] + "')"); 

     setTimeout(next, 10000); 
    } 
}); 

しかし、それは単一の要素の背景をクロスフェードすることが可能である：

CSS：

body 
{ 
    background-image: url("img/1.jpg"); 
    background-size: cover; 
    background-position: center 0; 
    background-attachment: fixed; 
    transition: background-image 2s ease-in-out; 
} 

JS

スクリプトソリューションは、このようになります。多くのimg要素の不透明度を変更するために）スクリプトを使用しないでください。

Answer 1

ええ、あなたはCSSのアニメーションでそれを行うことができます。

このようなものです。

* { box-sizing: border-box} 
 

 
.slides { 
 
    width: 300px; 
 
    height: 300px; 
 
    background: tomato; 
 
    animation: images 9s linear 0s infinite alternate; 
 
} 
 

 
@keyframes images { 
 
    0% { 
 
    background: url('https://fillmurray.com/300/300') 
 
    } 
 
    
 
    50% { 
 
    background: url('http://www.placecage.com/c/300/300'); 
 
    } 
 
    
 
    100% { 
 
    background: url('https://stevensegallery.com/300/300') 
 
    } 
 
}

<div class="slides"></div>

Answer 2

私は受け入れ解決策があっても自分の質問への答えとしてこれを投稿してください。これが追加するものは、次の画像にすぐに移行することなく、同じ画像上にしばらく滞在する方法です。

body { 
    background-size: cover; 
    background-position: center 0; 
    background-attachment: fixed; 
    animation: images 100s linear 0s infinite; 
} 

@keyframes images { 
    0% { 
    background-image: url("img/1.jpg") 
    } 

    19% { 
    background-image: url("img/1.jpg") 
    } 

    20% { 
    background-image: url("img/2.jpg"); 
    } 

    39% { 
    background-image: url("img/2.jpg"); 
    } 

    40% { 
    background-image: url("img/3.jpg"); 
    } 

    59% { 
    background-image: url("img/3.jpg"); 
    } 

    60% { 
    background-image: url("img/4.jpg"); 
    } 

    79% { 
    background-image: url("img/4.jpg"); 
    } 

    80% { 
    background-image: url("img/5.jpg"); 
    } 

    99% { 
    background-image: url("img/5.jpg"); 
    } 

    100% { 
    background-image: url("img/1.jpg") 
    } 
} 

私はグループに

0%, 19%, 100% { 
    background-image: url("img/1.jpg"); 
} 

のようないくつかの割合を試してみましたが、それは、画像間の "ちらつき" が生じました。