html - CSS 3 动画在 Chrome 中工作，而不是在 FF 和 IE 中工作

Question

我有一个在 Chrome 中工作的背景图像动画，但在 Firefox 和 IE 中不工作。你知道为什么吗？

我的 CSS 看起来像

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

HTML 部分是一个简单的 Some Content

Answer 1

你可以在mozilla documentation中看到属性背景图像不是动画属性