Avatar for Username

Search Support

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.

Learn More

Mulongo oyo etiyamaki na archive. Tuna motuna mosusu soki osengeli na lisalisi

css Fading animation not working in Firefox

  • 1 eyano
  • 0 eza na bankokoso oyo
  • 1 view
  • Eyano yasuka ya 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.

All Replies (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.