React Keyframes problem

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 React. In the html/css version, this transition is working fine, but in React the 3th image won't show and I get a white screen.

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);
  }
}

Jesus Arockia Sankaran S · Answer

Hi Nick, 

Thank you for contacting Syncfusion support. 

We have checked your query and we suppose that it is related general CSS feature. There is no special cases for any CSS features in JS frameworks including React. We request you to post your query in public discussion forums such as stackoverflow, mozilla developer forums, community support for getting suggestion from wide range of developer fraternity. 

https://stackoverflow.com/ 
https://github.com/mdn/ 

Regards, 
Jesus Arockia Sankaran S