Imagen de fondo en fotogtwig clave no se muestra en Firefox o Internet Explorer

Tengo varias animaciones en mi sitio que me acabo de dar cuenta de que ni siquiera aparecen en Firefox o Internet Explorer. Tengo la background-image dentro de los fotogtwigs clave. Lo hago porque tengo diferentes imágenes en diferentes porcentajes con la animación.

¿Por qué no se muestra la background-image dentro de los fotogtwigs clave en Firefox e Internet Explorer y hay alguna manera de hacer que esto funcione?

Según las especificaciones , background-image no es una propiedad animable o transitable. Pero no parece decir nada sobre qué o cómo debería ser el manejo cuando se utiliza como parte de la transición o la animación. Debido a esto, cada navegador parece estar manejándolo de manera diferente. Mientras Chrome (Webkit) muestra la imagen de fondo, Firefox y IE parecen no hacer nada.

La siguiente cita encontrada en un artículo en oli.jp proporciona información interesante:

Mientras que el Borrador del editor de CSS Backgrounds and Borders Level Level 3 dice “Animatable: no” para la imagen de fondo en el momento de la redacción, el soporte para imágenes de fundido cruzado en CSS apareció en Chrome 19 Canary. Hasta que llegue el soporte generalizado, puede falsificarse mediante sprites de imagen y posición de fondo u opacidad. Para animar degradados deben ser del mismo tipo.

A primera vista, parece que Firefox e IE lo están manejando correctamente, mientras que Chrome no lo está haciendo. Pero, no es tan simple. Firefox parece contradecirse a sí mismo cuando se trata de cómo maneja la transición en la imagen de fondo en oposición a la animación. Al hacer la transición background-image , se muestra la segunda imagen inmediatamente ( hover el primer div en el fragmento) mientras que mientras se anima, la segunda imagen no se muestra ( hover el segundo div en el fragmento).

Entonces, la conclusión es que es mejor no establecer background-image dentro de fotogtwigs clave . En su lugar, tenemos que usar background-position u opacity como se especifica @ oli.jp.

 div { background-image: url(http://placehold.it/100x100); height: 100px; width: 100px; margin: 10px; border: 1px solid; } div:nth-of-type(1) { transition: background-image 1s ease; } div:nth-of-type(1):hover { background-image: url(http://placehold.it/100/123456/ffffff); } div:nth-of-type(2):hover { animation: show-img 1s ease forwards; } @keyframes show-img { to { background-image: url(http://placehold.it/100/123456/ffffff); } }