Portfolio website review + an issue with animated background

Hello everyone!

I would greatly appreciate your feedback on my website
Link.

Also I have some issue with flickering background. Any ideas to fix this?
Here is the snippet of code:

html, body {
    background-color: black;
    background: url(../images/1.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    animation: animatedBackground 40s infinite;
    animation-delay: 0s;
    overflow: hidden;
    backface-visibility: hidden; 
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
    -webkit-transform: translate3d(0, 0, 0);
}

@keyframes animatedBackground {
    0% {
        background-image: url('../1.jpg');
    }

    35% {
        background-image: url('../2.jpeg');
    }

    70% {
        background-image: url('../3.jpeg');
    }

    100% {
        background-image: url('../1.jpeg');
    }
}

Thank you!

Hi @Dmitriifs
I’ve copied your code into a Codepen and can’t see a flickering issue, although it’s hard as I’ve used placeholder images.
What were you trying to achieve with your animation?
https://codepen.io/blueocto-the-looper/pen/dyObyGN

Hi @blueoctoltd!
I want to make a background where one image smoothly flows into another one. And I’ve achieved it but with a side effect as background flickering. Take a look at my website where it will be easier to notice it - website .

I’ve just updated my website and look for feedback: https://dmitrii-frolov.com.

Thanks!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.