Crossfading the background-image of a single element without script - html

Question

I want to switch background image of the body periodically, cross fading between each image.
A script solution would look like this:
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:
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);
}
});
But is it possible to cross fade the background of a single element (as opposed to change opacities of a number of img elements) using no scripting?

Answer 1

Yeah you could do it with css animations.
something like this.
* { box-sizing: border-box}
.slides {
width: 300px;
height: 300px;
background: tomato;
animation: images 4s 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

I post this as an answer to my own question even if there is a solution that I accepted. What this will add is how to stay for a while on the same image without immediately transitioning to the next.
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")
}
}
I tried to group some percentages like
0%, 19%, 100% {
background-image: url("img/1.jpg");
}
but that resulted in "flickering" between images.