CSS3 animation and background-image in Firefox

Question

I have a bit of CSS3 animation in my website, and it works fine on Safari but when I run the site in Firefox, it doesn't animate. Here is the code:

.ad{
position:relative;
left:740px;
top:240px;
width:260px;
height:195px;
background-image:url('ad1.png');

animation:myfirst 4s; 

-webkit-animation:myfirst 4s; /* Safari and Chrome */
-webkit-animation-delay:2s;
-webkit-animation-duration:0s;
-webkit-animation-fill-mode: forwards;
}

@keyframes myfirst 

 {
  from {background-image:url('ad1.png')}
  to {background-image:url('ad2.png')}

 }


@-webkit-keyframes myfirst /* Safari and Chrome */
 {
  from {background-image:url('ad1.png');}
  to {background-image:url('ad2.png');}
 }
}

Now I've noticed that the issue arises when the site hits the

 background-image:url('');

if I were to change these to

 background:color;  

then it works, but obviously I want to use an image. I've tried adding -moz- prefixes, but it doesn't work. What am I missing? is there a way to make firefox acknowledge

Background-image:url('')

Answer 1

The ability to interpolate between background images is a pretty new proposal so far, and not well supported in browsers. Firefox doesn't implement it yet.

Answer 2

use @-moz-keyframes and -moz-animation to define animation for firefox

Answer 3

According to the latest working draft of the spec (14 August 2015), background-image is defined as non animatable.

Then, Firefox is just following the spec, and the behavior of browsers which animate background-image is non-standard and shouldn't be relied on.