<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>
My keyframed animation is working perfectly in Chrome, but I'm experiencing issues with Firefox. The image defined in the CSS keyframe doesn't display on Firefox for some reason. Can someone please help me troubleshoot this problem? Thank you.