3 replies

Flicker in background transitions using keyframes

I've finally dived into the world of keyframes (despite fears of my skill limitations

) and re-made the hero section for my businesses website. Seen here: https://divanbleu.com/en/home/

But I get these little flickers from time to time. I figured it might be server resources that weren't enough so I reduced the image size but any smaller will start getting too grainy. I work in WordPress (Bricks Builder Theme) and here's the css on my hero section element. Is there anything about keyframes that I am missing and should know?

%root% refers to a class called .hero-section

%root%{
position: relative;
}

%root%::before{
position: absolute;
inset: 0;
content: '';
background:
linear-gradient(135deg, var(--primary-trans-80) 56%, var(--secondary) 50%);
opacity: 1;
z-index: -1;
}

%root%::after {
position: absolute;
inset: 0;
content: '';

background:
url("https://divanbleu.com/wp-content/uploads/couple-in-the-park-960x540.jpg");
background-size: cover;
animation: swapBackground 30s infinite alternate;
z-index: -2;
}

@keyframes swapBackground {
0% {
background:
url("https://divanbleu.com/wp-content/uploads/couple-in-the-park-960x540.jpg");
background-position: top left;
background-size: cover;
}
33% {
background:
url("https://divanbleu.com/wp-content/uploads/middle-aged-friends-960x540.jpg");
background-position: top left;
background-size: cover;
}
66%{
background:
url("https://divanbleu.com/wp-content/uploads/group-of-friends-960x540.jpg");
background-position: top left;
background-size: cover;
}
100% {
background:
url("https://divanbleu.com/wp-content/uploads/romantic-hammoc-960x540.jpg");
background-position: top left;
background-size: cover;
}
}

Divan bleu

Couple or Individual Therapy, and Sexology | Divan bleu

Couple and individual therapy clinic in Montreal and Laval. Overcome conflicts. Improve your relationships.