How do I get the background images to transition in less time like on the flickr homepage so they sh-CodePudding

In trying to clone the flickr homepage I've become stuck trying to get the background images to transition just as they do on the flickr homepage.

I tried using keyframes instead of javascript and the transition-duration and animation-duration properties.

the following is a distillation of the problem in code.

html document

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flickr_test</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    
</body>
</html>

css document

body {
    background-color: rgb(61, 61, 61);
    background-image: url(./test_images/computers.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    animation: changePhoto 100s ease-in-out forwards infinite;
    
}

@keyframes changePhoto {
    0% {
        background-image: url(./test_images/engineer.jpg);
    }
    10% {
        background-image: url(./test_images/lion.jpg);
    }
    20% {
        background-image: url(./test_images/horse.jpg);
    }
    30% {
        background-image: url(./test_images/mountains.jpg);
    }
    40% {
        background-image: url(./test_images/forest.jpg);
    }
    50% {
        background-image: url(./test_images/computers.jpg);
    }
    60% {
        background-image: url(./test_images/northernLights.jpg);
    }
    70% {
        background-image: url(./test_images/stars.jpg);
    }
    80% {
        background-image: url(./test_images/fern.jpg);
    }
    90% {
        background-image: url(./test_images/fish.jpg);
    }
    100% {
        background-image: url(./test_images/meditation.jpg);
    }
}

CodePudding user response：

I suggest you to use js to make smother transitions by adding

body {
transition: all ease .4s 
}

 body {
    transition: all ease 5s 
    }

that could works for what you want, so for experience I highly suggest you to use JS

CodePudding user response：

I would use javascript as others have mentioned, but I was able to accomplish this transition type using css. Instead of transitioning at a keyframe, if you set the background to the same 1% beforehand, then the transition from one to the other is forced to happen within that 1% of time.

A problem to deal with is that in most browsers that support this, the background will flicker when it is changed because the images haven't had their first loading yet. I just layered them in the background, but you might want to do something else.

body {
    background-color: rgb(61, 61, 61);
    background-image: 
        url(./test_images/meditation.jpg),
        url(./test_images/fish.jpg),
        url(./test_images/fern.jpg), 
        url(./test_images/stars.jpg), 
        url(./test_images/northernLights.jpg), 
        url(./test_images/forest.jpg), 
        url(./test_images/mountains.jpg), 
        url(./test_images/horse.jpg), 
        url(./test_images/lion.jpg), 
        url(./test_images/engineer.jpg),
        url(./test_images/computers.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    animation: changePhoto 100s ease 0s normal infinite;
}

@keyframes changePhoto {
    5%        {background-image: url(./test_images/computers.jpg);}
    6%, 14%   {background-image: url(./test_images/engineer.jpg);}
    15%, 23%  {background-image: url(./test_images/lion.jpg);}
    24%, 32%  {background-image: url(./test_images/horse.jpg);}
    33%, 41%  {background-image: url(./test_images/mountains.jpg);}
    42%, 50%  {background-image: url(./test_images/forest.jpg);}
    51%, 59%  {background-image: url(./test_images/northernLights.jpg);}
    60%, 68%  {background-image: url(./test_images/stars.jpg);}
    69%, 77%  {background-image: url(./test_images/fern.jpg);}
    78%, 86%  {background-image: url(./test_images/fish.jpg);}
    87%, 95%  {background-image: url(./test_images/meditation.jpg);}
    96%       {background-image: url(./test_images/computers.jpg);}
}

The css method has some drawbacks. If you add more images, you'll have to extend the duration of the animation and rebalance the percentages. If you keep adding more and more images, you would eventually have to start using decimal percentages in between the delay groups.

You'll also eventually be forced to deal with preloading using javascript if you add too many because doing it strictly in css like in this example will likely slow down initial page loading.