html - 动画和关键帧在 Firefox 中不起作用

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

您不需要 -moz-animation 前缀 anymore , 但您确实需要在关键帧上添加前缀 (@-moz-keyframes)。