CSS won't smoothly transition between pictures

Question

I'm quite new to HTML and CSS where I'm building a basic business website for personal project. I have added a few photos for a slideshow to show on my header/index home page of the website. What I have got working is that it is switching between pictures but not transitioning smoothly. I have attached my a snippet of my CSS below. Thanks in advance.

.header{
    height: 100vh;
    width: 100%;
    background-color: #fff;
    background-position: center;
    background-size: cover;
    animation: header 10s ease-in-out infinite;
    position: relative;
}

@keyframes header{
    0%,100%{
        background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/banner.png);
    }
    25% {
        background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/img2.jpg);
    }
    50% {
        background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/img3.jpg);
    }
    75% {
        background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/img4.jpg);
    }
    100% {
        background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/img5.jpg);
    }
}

score 0 · Answer 1 · 2022-04-21T08:44:05.900

0

You can use a filter. Like: filter: brightness(50%); an then a picture change. Hope it can help. Maybe you can take the text out of the picture show (e.g under the header). If you have low-resolution images, you can build an animated gif-image, but the gif's resolution isn't the best. An other way without gif or css you can create a small video.

edited Apr 21 '22 at 08:44

answered Apr 21 '22 at 07:28

Good idea. I implemented that but it's changing the brightness of the text overlaying the slideshow and also different transition patterns are coming in like fade in out and stretch in and out. Is there another solution? – dsm1240 Apr 21 '22 at 07:34

CSS won't smoothly transition between pictures

1 Answers1