Firefox和Internet Explorer中的CSS動畫故障

Question

我知道這可能已在其他地方得到解答，但似乎無法找到解決方案並將其實施。我有和CSS滑塊動畫在Safari和Chrome中正常工作，但在Firefox和IE中無法正常工作。我試圖使用供應商選擇器，但我可能做錯了。這是我第一次編寫任何代碼，而且我只有一週的時間來完成課程。這是我必須做的最後一件事。那麼如何讓我的動畫在IE和Firefox中工作？

您可以訪問網站here。

這裏是我的HTML

<div id="captioned-gallery"> 
      <figure class="slider"> 
       <figure> 
        <img src="Images/hungarian-goulash_10-20-13_1_ca.jpg" width="600" height="400" alt="Photo of Hungarian Sausage Goulash"/> 
         <figcaption class="slider2">Hungarian Sausage Goulash</figcaption> 
       </figure> 
       <figure> 
        <img src="Images/G-lasagne-al-forno.jpg" width="600" height="400" alt="Photo of Lasagne al Forno"/> 
         <figcaption class="slider2">Lasagna al Forno</figcaption> 
       </figure> 
       <figure> 
        <img src="Images/5357829-svickova.jpg" width="600" height="400" alt="Photo of Svickova"/> 
         <figcaption class="slider2">Svickova</figcaption> 
       </figure> 
       <figure> 
        <img src="Images/pork shoulder.jpg" width="600" height="400" alt="Photo of Pork Shoulder with Dumplings"/> 
         <figcaption class="slider2">Pork Shoulder with Dumplings</figcaption> 
       </figure> 
       <figure> 
        <img src="Images/hungarian-goulash_10-20-13_1_ca.jpg" width="600" height="400" alt="Photo of Hungarian Sausage Goulash"/> 
         <figcaption class="slider2">Hungarian Sausage Goulash</figcaption> 
       </figure> 
      </figure> 

我的CSS

div#captioned-gallery { 
    width: 100%; 
    max-width: 600px; 
    margin: 10px; 
    overflow: hidden; 
    float: left; 
    height: auto; 
} 

figure { 
    margin: 0; 
} 

figure.slider { 
    position: relative; 
    width: 500%; 
    font-size: 0; 
    -webkit-animation: 20s slidy ease-in-out infinite; 
    -moz-animation: 20s slidy ease-in-out infinite; 
    -ms-animation: 20s slidy ease-in-out infinite; 
    animation: 20s slidy ease-in-out infinite; 
} 

figure.slider figure 
    { 
     width: 20%; 
     height: auto; 
     display: inline-block; 
     position: inherit; 
} 

figure.slider img 
    { 
     width: 100%; 
     height: auto; 
} 

@-webkit-keyframes slidy { 
    20% { left: 0%; } 
    25% { left: -100%; } 
    45% { left: -100%; } 
    50% { left: -200%; } 
    70% { left: -200%; } 
    75% { left: -300%; } 
    95% { left: -300%; } 
    100% { left: -400%; } 
} 

@keyframes slidy { 
    20% { left: 0%; } 
    25% { left: -100%; } 
    45% { left: -100%; } 
    50% { left: -200%; } 
    70% { left: -200%; } 
    75% { left: -300%; } 
    95% { left: -300%; } 
    100% { left: -400%; } 
} 

@-ms-keyframes slidy { 
    20% { left: 0%; } 
    25% { left: -100%; } 
    45% { left: -100%; } 
    50% { left: -200%; } 
    70% { left: -200%; } 
    75% { left: -300%; } 
    95% { left: -300%; } 
    100% { left: -400%; } 
} 

在此先感謝您的幫助！

Answer 1

對於Firefox使用-moz-並按照以下順序。微軟在IE 10+版本中支持動畫的另外一件事。 See Reference

@-moz-keyframes slidy { 
    20% { left: 0%; } 
    25% { left: -100%; } 
    45% { left: -100%; } 
    50% { left: -200%; } 
    70% { left: -200%; } 
    75% { left: -300%; } 
    95% { left: -300%; } 
    100% { left: -400%; } 
} 

@-ms-keyframes slidy { 
    20% { left: 0%; } 
    25% { left: -100%; } 
    45% { left: -100%; } 
    50% { left: -200%; } 
    70% { left: -200%; } 
    75% { left: -300%; } 
    95% { left: -300%; } 
    100% { left: -400%; } 
} 

@-webkit-keyframes slidy { 
    20% { left: 0%; } 
    25% { left: -100%; } 
    45% { left: -100%; } 
    50% { left: -200%; } 
    70% { left: -200%; } 
    75% { left: -300%; } 
    95% { left: -300%; } 
    100% { left: -400%; } 
} 

@keyframes slidy { 
    20% { left: 0%; } 
    25% { left: -100%; } 
    45% { left: -100%; } 
    50% { left: -200%; } 
    70% { left: -200%; } 
    75% { left: -300%; } 
    95% { left: -300%; } 
    100% { left: -400%; } 
} 

並更新下面給出你的CSS：

figure.slider { 
    position: relative; 
    width: 500%; 
    font-size: 0; 

    -moz-animation-duration: 20s; 
    -moz-animation-name: slidy; 
    -moz-animation-iteration-count: infinite; 
    -moz-animation-direction: alternate; 
    -moz-animation-timing-function: ease-in-out; 

    -webkit-animation-duration: 20s; 
    -webkit-animation-name: slidy; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-direction: alternate; 
    -webkit-animation-timing-function: ease-in-out; 

    -ms-animation-duration: 20s; 
    -ms-animation-name: slidy; 
    -ms-animation-iteration-count: infinite; 
    -ms-animation-direction: alternate; 
    -ms-animation-timing-function: ease-in-out; 

    animation-duration: 3s; 
    animation-name: slidy; 
    animation-iteration-count: infinite; 
    animation-direction: alternate; 
    animation-timing-function: ease-in-out; 
}