Eu estou fazendo animação de quadro-chave em CSS. A animação parece estar funcionando muito bem no Chrome, já que as sintaxes -webkit são suportadas.

@-webkit-keyframes title_toggle 
{
from { background-image:url(images/title.png); }
75%{ background-image:url(images/title_hover.png); }
to { background-image:url(images/title.png); }
}

Eu tentei o código abaixo para o Firefox, mas não está funcionando

@-moz-keyframes title_toggle {
from { background-image:url(images/title.png); }
75%{ background-image:url(images/title_hover.png); }
to { background-image:url(images/title.png); }
}

Por favor, deixe-me saber que eu iria este trabalho em FF.

Esta é a parte CSS.

@-moz-keyframes title_toggle {
from { background-image:url(images/title.png); }
75%{ background-image:url(images/title_hover.png); }
to { background-image:url(images/title.png); }
}

.title{
    width:40%;
    height: 30%;
    position: absolute;
    top: 10%;
    left: 5%;
    background-size: 100% 100%;
    background-repeat:no-repeat;
    -webkit-animation-name: title_toggle;
    -webkit-animation-duration:5s;
    -webkit-animation-iteration-count:infinite;
    background-size: 100% 100%; 
     -moz-animation-name: title_toggle;
     -moz-animation-duration:5s;
     -moz-animation-iteration-count:infinite;
}

E esse é o HTML

<div class="title"></div>