How to make Firefox render CSS keyframes animation smoothly as it does Chrome and Safari?

Question

The goal is to make animation look the same in all browsers. The problem is that in Firefox there is an abrupt change of a background image on each animation change while in other browsers there is a smooth nice transition. Open this link please in chrome/safari and in Firefox to notice the difference in animation behaviour: https://codepen.io/dmitriifs/pen/QWKopMV

Is it possible to achieve the same effect of a smooth transition from one image to another in Firefox? Here is the code:

body {
  background: url("https://cdn.pixabay.com/photo/2020/12/18/15/29/mountains-5842346_1280.jpg")
    no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  animation: animatedBackground 10s infinite;
  animation-delay: 0s;
  -moz-animation: animatedBackground 40s infinite;
  -ms-animation: animatedBackground 40s infinite;
  -webkit-animation: animatedBackground 40s infinite;
}

@keyframes animatedBackground {
  0% {
    background-image: url("https://cdn.pixabay.com/photo/2020/12/18/15/29/mountains-5842346_1280.jpg");
  }

  40% {
    background-image: url("https://cdn.pixabay.com/photo/2021/01/29/09/33/beach-5960371_1280.jpg");
  }

  80% {
    background-image: url("https://cdn.pixabay.com/photo/2021/01/30/20/35/bird-5965265__480.jpg");
  }
}

@-moz-keyframes animatedBackground {
  0% {
    background-image: url("https://cdn.pixabay.com/photo/2020/12/18/15/29/mountains-5842346_1280.jpg");
  }

  40% {
    background-image: url("https://cdn.pixabay.com/photo/2021/01/29/09/33/beach-5960371_1280.jpg");
  }

  80% {
    background-image: url("https://cdn.pixabay.com/photo/2021/01/30/20/35/bird-5965265__480.jpg");
  }
}

question from:https://stackoverflow.com/questions/66062272/how-to-make-firefox-render-css-keyframes-animation-smoothly-as-it-does-chrome-an

Answer 1

Waitting for answers