KPC
Kevin Powell - Community•2w ago
Dawson

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.
2 Replies
Kevin Powell
Kevin Powell•2w ago
I could be wrong on this, but I notice the issue only seems to happen the first time around. I think it's being caused by the image loading in for each of them. as for how to fix it... I'm not 100% sure, lol. I'd probably have all 5 images as regular images and not background images, stacked on each other, and have their opacity going independently. something like: 
.bg-image {
  animation: images 10s infinite linear;
}

.bg-image:nth-child(1) {
  animation-delay: -5s;
}

.bg-image:nth-child(2) {
  animation-delay: 0s;
}

.bg-image:nth-child(3) {
  animation-delay: 5s;
}

/* etc */

@keyframes images {
  0% { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}
.bg-image {
  animation: images 10s infinite linear;
}

.bg-image:nth-child(1) {
  animation-delay: -5s;
}

.bg-image:nth-child(2) {
  animation-delay: 0s;
}

.bg-image:nth-child(3) {
  animation-delay: 5s;
}

/* etc */

@keyframes images {
  0% { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}
A negative delay starts the animation that far into the animation, so it would start it at 50%, where it's already loaded in. I think my numbers would work, but I haven't tested it 😄
capt_uhu
capt_uhu•2w ago
preloading the images with <link> is an option. 
<link rel="preload" href="flower.avif" as="image" type="image/avif" />
<link rel="preload" href="flower.avif" as="image" type="image/avif" />
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload
MDN Web Docs
rel=preload - HTML: HyperText Markup Language | MDN
The preload value of the element's rel attribute lets you declare fetch requests in the HTML's , specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers' main rendering machinery kicks in. This ensures they are available earlier and are less likely to block the page's...

Did you find this page helpful?