css - La imagen de fondo en el fotograma clave no se muestra en Firefox o Internet Explorer

css3 internet-explorer

Question

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

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

Answer 1

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

La cita a continuación que se encuentra en un artículo en oli.jp proporciona información interesante:

Mientras que el borrador del editor de nivel 3 del módulo de fondos y bordes CSS dice "Animatable: no" para la imagen de fondo en el momento de la escritura, el soporte para imágenes cruzadas en CSS apareció en Chrome 19 Canary. Hasta que llegue el soporte generalizado, esto se puede falsificar a través de sprites de imagen y posición de fondo u opacidad. Para animar gradientes 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 cuando se trata de cómo maneja la transición en la imagen de fondo en lugar de la animación. Mientras realiza la transición background-image , muestra la segunda imagen de inmediato ( hover el primer div en el fragmento) mientras que mientras anima, la segunda imagen no se muestra en absoluto ( hover el segundo div en el fragmento).

Entonces, la conclusión es que es mejor no establecer background-image dentro de los fotogramas clave . En cambio, 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);
  }
}

<div></div>
<div></div>

Si tiene varias imágenes que deberían mostrarse en diferentes porcentajes dentro del fotograma clave, sería una mejor idea agregar todas esas imágenes en el elemento al inicio y animar su posición como en el fragmento a continuación. Esto funciona de la misma manera en Firefox, Chrome e IE .

div {
  background-image: url(http://placehold.it/100x100), url(http://placehold.it/100/123456/ffffff);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: 0px 0px, 100px 0px;
  height: 100px;
  width: 100px;
  margin: 10px;
  border: 1px solid;
}
div:hover {
  animation: show-img 1s steps(1) forwards;
}
@keyframes show-img {
  to {
    background-position: -100px 0px, 0px 0px;
  }
}

<div></div>

O, como en el fragmento de abajo. Básicamente, cada imagen tiene el mismo tamaño que el contenedor, ya que background-size se establece como 100% 100% pero solo se muestra una imagen en un momento dado debido a que tienen el mismo tamaño que el contenedor. Entre el 0% y el 50% se muestra la primera imagen porque está en 0px,0px ( 0px,0px izquierda) mientras que la segunda imagen está en 100px,0px (fuera del borde derecho). Al 50.1% , la primera imagen está a -100px,0px (fuera del borde izquierdo) y la segunda imagen está a 0px,0px lo que es visible.

div {
  background-image: url(http://lorempixel.com/100/100/nature/1), url(http://lorempixel.com/100/100/nature/2);
  background-size: 100% 100%; /* each image will be 100px x 100px */
  background-repeat: no-repeat;
  background-position: 0px 0px, 100px 0px;
  height: 100px;
  width: 100px;
  margin: 10px;
  border: 1px solid;
  animation: show-img 10s ease forwards;
}
@keyframes show-img {
  0%, 50%{
    background-position: 0px 0px, 100px 0px; /* initially 1st image will be shown as it it as 0px 0px */
  }
  50.1%, 100% {
    background-position: -100px 0px, 0px 0px; /* at 50.1% 2nd image will be shown as it it as 0px 0px */
  }
}

<div></div>