Dawson
KPCKevin Powell - Community
•Created by Dawson on 1/24/2025 in #front-end
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; } }
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; } }
4 replies