анимация и ключови кадри, които не работят в. - 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-анимация вече, но трябва да добавите префикси към ключовите рамки (@ - moz-keyframes).

На първо място, използвам Firefox 28.

По-долу е учебникът от W3 училища. Така че аз вярвам, че си струва да погледнем.

CSS3 Анимационна собственост изпробвайте

Едно е, че според мен урок е билактуализирана и -moz- връзка изглежда няма. Така че, що се отнася до съвместимостта, юрските версии на IE и Firefox 3.5 и преди това могат да създадат проблем.