css Fading animation not working in Firefox
.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)
It looks to me like this is a bug in chrome, technically. [CSSWG] says:Animation type: discreteThat being said this is probably dependent on us implementing cross-fade.
From Bug 1605726.