Join the AMA (Ask Me Anything) with the Firefox leadership team to celebrate Firefox 20th anniversary and discuss Firefox’s future on Mozilla Connect. Mark your calendar on Thursday, November 14, 18:00 - 20:00 UTC!

Avatar for Username

تلاش سپورٹ

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

مزید سیکھیں

اس تھریڈ کو آرکائیوکیا گیا تھا۔ اگر آپ کو مدد کی ضرورت ہو تو براہ مہربانی نیا سوال پوچھیں۔

css Fading animation not working in Firefox

  • 1 جواب دیں
  • 0 میں یہ مسئلہ ہے
  • 1 دیکھیں
  • آخری جواب بذریعہ zeroknight

rabandclang
rabandclang
more options

.animation { 

   flex: 1;
   width: 100%;
   height: 100%;
   position: relative;
   animation-name: graphic;
   animation-duration: 20s;
   animation-iteration-count: infinite;
   background-size: 100% 100%;
   background-repeat: no-repeat;
 }


@keyframes graphic { 

   0%   {background-image: url("images/a.jpeg")}
   25%  {background-image: url("images/b.jpeg")}
   50%  {background-image: url("images/c.jpeg")}
   75%  {background-image: url("images/d.jpeg")}
   100% {background-image: url("images/a.jpeg")}

} This produces a fading transition of the images on all browsers, but in firefox it will not implement the fading transition but just replaces the images without the transition.

.animation { flex: 1; width: 100%; height: 100%; position: relative; animation-name: graphic; animation-duration: 20s; animation-iteration-count: infinite; background-size: 100% 100%; background-repeat: no-repeat; } @keyframes graphic { 0% {background-image: url("images/a.jpeg")} 25% {background-image: url("images/b.jpeg")} 50% {background-image: url("images/c.jpeg")} 75% {background-image: url("images/d.jpeg")} 100% {background-image: url("images/a.jpeg")} } This produces a fading transition of the images on all browsers, but in firefox it will not implement the fading transition but just replaces the images without the transition.

تمام جوابات (1)

zeroknight
zeroknight
more options
It looks to me like this is a bug in chrome, technically. [CSSWG] says:
Animation type: discrete
That being said this is probably dependent on us implementing cross-fade.

From Bug 1605726.