анімація та ключові кадри не працюють в firefox - html, css3

У мене виникли проблеми з роботою сайтуу всіх основних браузерах, і я знову застряг. Моя анімація ключових кадрів не працює у 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) }
}

Відповіді:

Вам не потрібен префікс -moz-animation більше, але вам потрібно додати префікси на ключових кадрах (@ - moz-keyframes).

Перш за все, я використовую Firefox 28.

Нижче наведено підручник з шкіл W3. Тому я вважаю, що варто подивитися.

CSS3 Анімація Властивість спробуйте

Одна річ, що, я думаю, підручник бувоновлено і -moz-link, схоже, не існує. Отже, що стосується сумісності, то юрські версії IE і Firefox 3.5 і раніше можуть викликати проблеми.