animácie a kľúčové snímky nefungujú v programe firefox - html, css3

Mám problémy s fungovaním svojich stránokvo všetkých hlavných prehľadávačoch a ja som sa zasekol znova. Animácia mojich kľúčových snímok sa v prehliadači Firefox nespúšťa a nedokážem zistiť prečo. V prehliadači Chrome to funguje perfektne.

.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) }
}

odpovede:

Nepotrebujete predponu -moz-animácie už, musíte však do kľúčových snímok pridať predpony (@ - moz-keyframes).

Najskôr používam prehliadač Firefox 28.

Nižšie je uvedený návod zo škôl W3. Takže si myslím, že stojí za to sa na to pozrieť.

Vyskúšajte vlastnosť animácie CSS3

Jedna vec je, že si myslím, že návod bolZdá sa, že neexistuje aktualizovaný a -moz- odkaz. Pokiaľ ide o kompatibilitu, právne verzie IE a Firefox 3.5 a staršie verzie môžu spôsobovať problémy.