title: CSS3 animation and background-image in Firefox
body: <p>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:</p>
  
  <pre><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');}
   }
  }
  </code></pre>
  
  <p>Now I've noticed that the issue arises when the site hits the  </p>
  
  <pre><code> background-image:url('');
  </code></pre>
  
  <p>if I were to change these to </p>
  
  <pre><code> background:color;  
  </code></pre>
  
  <p>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 </p>
  
  <pre><code>Background-image:url('')
  </code></pre>