background-image para firefox en animaciones CSS3

Estoy haciendo animación de fotogtwig clave en CSS. La animación parece funcionar muy bien en Chrome ya que se admiten las syntax -webkit.

@-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); } } 

Probé el código a continuación para Firefox, pero no funciona

 @-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, hágamelo saber que haría este trabajo en FF.

Esta es la parte de 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; } 

Y este es el HTML

 

Si pregunta por la falta de interpolación de fundido cruzado entre diferentes imágenes, es una adición muy nueva a la especificación que aún no es ampliamente compatible.

Esto no funciona porque Firefox no admite animaciones en imágenes de fondo. Imagen de fondo no es animable. Chrome tiene su propia implementación, pero no funcionará Firefox. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties