title: CSS 3 Animation is working in Chrome, not in FF and IE
body: <p>I got a background-image Animation which works in Chrome, but doesn't in Firefox and IE. Do you know why?</p>
  
  <p>My CSS looks like</p>
  
  <pre><code>#banner {
      background-attachment: fixed;
      background-color: #666;
      background-image: url("../images/banner-1.jpg");
      background-position: top center;
      background-repeat: no-repeat;
      background-size: cover;
      animation-name: banner;
      animation-duration: 15s;
      animation-iteration-count: infinite;
      -webkit-animation-name: banner; 
      -webkit-animation-duration: 20s;
      -webkit-animation-iteration-count: infinite;
      -moz-animation-name: banner;
      -moz-animation-duration: 20s;
      -moz-animation-iteration-count: infinite;
  }
  
  @keyframes banner {
      0%  { background-image: url(../images/banner-1.jpg); }
      33% { background-image: url(../images/banner-2.jpg); }
      60% { background-image: url(../images/banner-2.jpg); }
      93% { background-image: url(../images/banner-3.jpg); }
  }
  @-moz-keyframes banner {
      0%  { background-image: url(../images/banner-1.jpg); }
      33% { background-image: url(../images/banner-2.jpg); }
      60% { background-image: url(../images/banner-2.jpg); }
      93% { background-image: url(../images/banner-3.jpg); }
  }
  @-webkit-keyframes banner {
      0%  { background-image: url("../images/banner-1.jpg"); }
      33% { background-image: url("../images/banner-2.jpg"); }
      60% { background-image: url("../images/banner-2.jpg"); }
      93% { background-image: url("../images/banner-3.jpg"); }
  }
  </code></pre>
  
  <p>The HTML Part is a simple Some Content</p>