title: @keyframes not working in Firefox
body: <p>Umm, hello. 
  I was playing around with the @keyframes property of CSS3 and the animation doesn't seem to work in Firefox. 
  Can someone please tell me what is wrong in my code? </p>
  
  <p>Thanks!</p>
  
  <pre><code>#slideshow{
      height : 150px;
      width : 190px;
      animation:slideshow 21s infinite;
      -webkit-animation:slideshow 21s infinite;
      -moz-animation:slideshow 21s infinite;
  }
  
  
  
  @keyframes slideshow{
      0%   {background : url('1.jpg');}
      14%  {background : url('2.jpg');}
      28%  {background : url('3.jpg');}
      42%  {background : url('4.jpg');}
      56%  {background : url('5.jpg');}
      70%  {background : url('6.jpg');}
      84%  {background : url('7.jpg');}
      100%  {background : url('1.jpg');}
  }
  
  @-webkit-keyframes slideshow{
      0%   {background : url('1.jpg');}
      14%  {background : url('2.jpg');}
      28%  {background : url('3.jpg');}
      42%  {background : url('4.jpg');}
      56%  {background : url('5.jpg');}
      70%  {background : url('6.jpg');}
      84%  {background : url('7.jpg');}
      100%  {background : url('1.jpg');}
  }
  
  @-moz-keyframes slideshow{
      0%   {background : url('1.jpg');}
      14%  {background : url('2.jpg');}
      28%  {background : url('3.jpg');}
      42%  {background : url('4.jpg');}
      56%  {background : url('5.jpg');}
      70%  {background : url('6.jpg');}
      84%  {background : url('7.jpg');}
      100%  {background : url('1.jpg');}
  }
  </code></pre>
  
  <p>Also, the animation works perfectly in Chrome. </p>