NextJS Keyframes

Question

I created a background with 3 images using keyframes. I first created the project just using html and css, but now I'm trying to create my project using NextJS.

In the html/css version, this transition is working fine, but in NextJS the 3th image won't show, I get a white screen, the fist two however work fine.

Can anybody help me with this please? Please find added my code:

.mainheader {
  height: 100vh;
  position: relative;
  color: #fff;
  animation: animate ease-in-out 10s infinite;
  background-size: cover;
}
@keyframes animate {
  0%,
  100% {
    background-image: url(../assets/afbeeldingen/bg-3.jpg)
      url(../assets/afbeeldingen/bg-1.jpg);
  }
  33% {
    background-image: url(../assets/afbeeldingen/bg-1.jpg),
      url(../assets/afbeeldingen/bg-2.jpg);
  }
  66% {
    background-image: url(../assets/afbeeldingen/bg-2.jpg),
      url(../assets/afbeeldingen/bg-3.jpg);
  }
}

Answer 1

First, I dont know if this applies to your case since you didnt provide a link or snippet to your problem code. I was experiencing the same problems with a slideshow css animation .

#slideset1 > * {
    position: absolute;
    height: 10rem;
    top: 0;
    left: -22.5rem;
    animation: 12s autoplay1 infinite ease-in-out;
}

The HTML/CSS code works on codepen, but when transferred to nextjs environment it just didnt animate. After trying various suggestions, what resolved it was this from Alex Galays . To not use the shorthand for the animation property but to specify each animation property that you use separately.

#slideset2 > * {
  position: absolute;
  height: 10rem;
  top: 25rem;
  left: 0;
  animation-duration: 12s;
  animation-name: autoplay2;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

You can see it working here on codesandbox Cant/didnt test with your case, but you can apply it to your own code.