Question

我一直无法让我的网站在所有主流浏览器上运行，而且我再次陷入困境。我的关键帧动画不能在Firefox中运行，我无法理解为什么。它在Chrome中完美运行。

.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(pic1.png);
    -webkit-animation: slideshow 20s infinite 2s;
       -moz-animation: slideshow 20s infinite 2s;
            animation: slideshow 20s infinite 2s;
}

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

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

Answer 1

首先，我使用的是Firefox 28.

以下是W3学校的教程。 所以我相信值得一看。

CSS3 Animation Property try out

有一点是，我认为教程已经更新，-moz-link似乎没有。因此，就兼容性而言，IE和Firefox 3.5以及之前的侏罗纪版本可能会产生问题。

Answer 2

您不需要-moz-animation前缀anymore，但您需要在关键帧上添加前缀（@ - moz-keyframes）。

动画和关键帧无法在Firefox中运行

2 个答案: