CSS animation not working in firefox keyframe

Question

<html>
<head>
<title>CHK</title>
<style>
@keyframes a1
{
00% {background-color:red;}
20% {background-image:url(1.jpg);}
50% {background-color:orange;}
70% {background-color:silver;}
98% {background-color:blue;}
100% {background-color:red;}
}
#ida
{
width:200px;
height:200px;
animation-name:a1;
animation-duration:8s;
animation-iteration-count: infinite;
}
</style>
</head>
<body>
<div id="ida">
</div>
</body>
</html>

i am using keyframes this is working fine in chrome but in firefox the image i have used is not being displayed idk what is the reason.... pls take a look thx..

Answer 1

Firefox doesn't support animatable background-image .

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

CSS animation not working in firefox keyframe

Question

1 answers

solution1
0 2015-08-12 18:21:40

CSS animation not working in firefox keyframe

Question

1 answers

solution1 0 2015-08-12 18:21:40

solution1
0 2015-08-12 18:21:40