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

对于火狐，使用-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;
}