css动画前缀错误答案

【问题标题】：css animation prefix errorscss动画前缀错误
【发布时间】：2014-02-20 23:43:10
【问题描述】：

我有一个关键帧动画可以在 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)}
    }

【问题讨论】：

你忘了为FF启动动画：-webkit-animation: slideshow 20s infinite 2s;动画：幻灯片20s无限2s；那里也应该有-moz-animation。 :)
谢谢，但据我所知，不再需要动画前缀。反正加了也没啥区别，还是跑不了！
在 FF 和 Chrome 中为我工作，看看：jsfiddle.net/J9aer 和另一个图像示例：jsfiddle.net/J9aer/3
取出 -webkit 关键帧，它不会在小提琴中运行
抱歉，它确实在 ff jsfiddle 中运行，那么它拒绝在实际浏览器中运行的原因可能是什么 - 无论如何，对我来说

标签： html css animation

【解决方案1】：

您是否在您的css 中使用了-moz-animation。我认为这不在您的css 中，而对于 IE，它适用于 IE 10。

【讨论】：

你不再需要那个前缀了，但我已经尝试添加它，仍然不起作用！
您的代码在我的 Firefox 26.0 中运行。我已经复制了您的代码并尝试了它，它工作正常...
但它仍然无法在我的工作 - 可能是什么原因？