Ops,
как вариант... но лучше к специалистам по css
https://stackoverflow.com/questions/...-image-opacity
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.carousel {
width: 350px;
height: 170px;
position: relative;
border-radius: 8px;
box-sizing: border-box;
border: #8B4513 2px solid;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.9) 0 100%), var(--src);
background-size: 350px 170px;
}
.carousel.show {
animation: up .8s linear forwards;
}
.carousel.hide {
animation: up .3s linear backwards;
}
.carousel.vertical {
width: 170px;
height: 350px;
background-size: 170px 350px;
}
@keyframes up {
0% {
background-image: linear-gradient(to right, rgba(255, 255, 255, .9) 0 100%), var(--src);
}
20% {
background-image: linear-gradient(to right, rgba(255, 255, 255, .7) 0 100%), var(--src);
}
40% {
background-image: linear-gradient(to right, rgba(255, 255, 255, .5) 0 100%), var(--src);
}
60% {
background-image: linear-gradient(to right, rgba(255, 255, 255, .3) 0 100%), var(--src);
}
80% {
background-image: linear-gradient(to right, rgba(255, 255, 255, .1) 0 100%), var(--src);
}
100% {
background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0 100%), var(--src);
}
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
document.querySelectorAll(".carousel").forEach(function(el) {
let {
src,
num,
pause = 3000,
i = 0
} = el.dataset;
function hide() {
el.classList.remove("show");
el.classList.add("hide");
window.setTimeout(show, 300)
}
function show() {
++i;
el.style.setProperty("--src", `url('${src+i}')`);
i %= num;
el.classList.remove("hide");
el.classList.add("show");
window.setTimeout(hide, pause);
}
show();
}
)
});
</script>
</head>
<body>
<div class="carousel" data-pause="3000" data-num=3 data-src='https://loremflickr.com/350/170/kitty,kitten?random='>
12345
</div>
<div class="carousel vertical" data-pause="5000" data-num=12 data-src='https://loremflickr.com/170/350/dog,hound?random='>
12345
</div>
</body>
</html>