2

I got a background-image Animation which works in Chrome, but doesn't in Firefox and IE. Do you know why?

My CSS looks like

#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"); }
}

The HTML Part is a simple Some Content

pexmar
  • 331
  • 2
  • 12
  • Why is the animation timing for some browsers different from the others? – Mr Lister Apr 04 '15 at 08:25
  • little mistake, thanks. But that doesn't solve the problem :( – pexmar Apr 04 '15 at 13:19
  • because it's working only in chrome, more answers http://stackoverflow.com/questions/7318462/changing-background-image-with-css3-animations – user123321 Apr 05 '15 at 09:26
  • @user123321 When you see something that essentially asks the same thing, feel free to flag it as being a duplicate. Click on the "Close" link under the question to do that. – Mike Jun 17 '15 at 23:15

1 Answers1

3

You can see in the mozilla documentation that the propertie background image is not an animatable propertie

Raúl Martín
  • 4,471
  • 3
  • 23
  • 42