1

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");
  }
}
Amit Verma
  • 8,660
  • 8
  • 35
  • 40
Dmitriif
  • 2,020
  • 9
  • 20
  • Does this answer your question? [Preloading CSS Images](https://stackoverflow.com/questions/1373142/preloading-css-images) – Justinas Feb 05 '21 at 11:29
  • Thanks but my question has nothing to do with preloading css images but with the way animation renders in different browsers. If I'm wrong I would appreciate if you explain me how preloading can fix the issue. – Dmitriif Feb 05 '21 at 12:58
  • Oh, I just opened it on Chrome. Then it's not preloading issue: https://stackoverflow.com/questions/12685133/background-image-for-firefox-in-css3-animations – Justinas Feb 05 '21 at 13:32

0 Answers0