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部分是一個簡單的一些內容

Answer 1

可以在mozilla documentation看到propertie背景圖片不是動畫propertie