html - css动画前缀错误

Question

我有一个关键帧动画在 chrome 中有效，但在 IE 或 Firefox 中无效。

我尝试过使用带有 @-moz-keyframes 前缀的 -moz-animation 前缀，使用一个而不使用另一个，并且尝试不使用任何一个，同时在每个 css 行的末尾包含标准的非前缀语句。

然而，一点运气都没有。代码中其他地方是否有错误？我使用的是最新的浏览器版本。

HTML

   <div class="runner"></div>

CSS

    .runner {
        border-radius: 40pt ; 
        -webkit-box-shadow: 0 0 10pt grey ; 
        -moz-box-shadow: 0 0 10pt grey ;
        box-shadow: 0 0 10pt grey ; 
        width:494px ; 
        height: 415.8px ; 
        position: absolute ; top:0 ; left: 0 ; 
        background: url(img/pic1.png) ;
       -webkit-animation: slideshow 20s infinite 2s ; animation: slideshow 20s infinite 2s
    }

    @-moz-keyframes slideshow {
    20% {background:url(pic1.png)}
    25%, 45% {background:url(img/pic2.png)}
    50%, 70% {background:url(img/pic3.png)}
    75%, 95% {background:url(img/pic4.png)}
    }

    @-webkit-keyframes slideshow {
    20% {background:url(img/pic1.png)}
    25%, 45% {background:url(img/pic2.png)}
    50%, 70% {background:url(img/pic3.png)}
    75%, 95% {background:url(img/pic4.png)}
    }

    @keyframes slideshow {
    20% {background:url(img/pic1.png)}
    25%, 45% {background:url(img/pic2.png)}
    50%, 70% {background:url(img/pic3.png)}
    75%, 95% {background:url(img/pic4.png)}
    }

Answer 1

你有没有在你的css中使用-moz-animation。我认为这不在您的 css 中，对于 IE，它适用于 IE 10。