I am attempting to create a slideshow using CSS with a fade in-out effect by combining images and linear gradients. The initial code I used worked perfectly for transitioning between images, but as soon as I added the linear gradient to each photo, the smooth transition stopped. Now, instead of animating, the background changes abruptly without any visual effects. Below is an example of the code that I initially tried:
.hero {
height: calc(100vh - 100px);
display: flex;
flex-direction: column;
flex-wrap: wrap;
text-align: center;
justify-content: center;
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/slideshow_images/1.jpg');
animation: changeBackground 15s infinite;
animation-duration: 15s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
}
@keyframes changeBackground {
0%,
6%,
12% {
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/slideshow_images/1.jpg'), url('/slideshow_images/2.jpg');
}
24%,
30%,
36% {
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/slideshow_images/2.jpg'), url('/slideshow_images/3.jpg');
}
48%,
54%,
60% {
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/slideshow_images/3.jpg'), url('/slideshow_images/4.jpg');
}
72%,
78%,
84% {
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/slideshow_images/4.jpg'), url('/slideshow_images/1.jpg');
}
}
Does anyone know how I can maintain the smooth animation effects from the original code snippet while also incorporating linear gradients into the images? It's worth noting that I included two image URLs in each group to resolve a previous issue where there was a flashing screen during background-image transitions.