1

tenia una duda. Quería conseguir que el fondo de mi web cambiara usando keyframes. Por ello usé animation-timing-function: step-start;. El problema es que sí que cambia, pero en cada cambio hay un horrible parpadeo blanco, como si se quitara la imagen y se viera el fondo. Me gustaría que no se produciera ese parpadeo. Este es mi código de CSS:

body{
    margin: 0;
}

#container{
   position: absolute;
   width: 100%;
   min-height: 100%;
   margin: 0 auto;
   background-image: url("../IMAGES/cancha.png");
   background-size: cover;
   background-repeat: no-repeat;
   animation-timing-function: step-start;
   animation-name: animacion;
   animation-fill-mode: forwards;
   animation-duration: 10s;
}

@keyframes animacion {
  0% {
    background-image: url("../IMAGES/cancha1.png");
    animation-timing-function: steps(1, start);  
  }

  7% {
    background-image: url("../IMAGES/cancha2.png");
    animation-timing-function: steps(1, start);  
  }

  15% {
    background-image: url("../IMAGES/cancha3.png");
    animation-timing-function: steps(1, start);  
  }

  22% {
    background-image: url("../IMAGES/cancha4.png");
    animation-timing-function: steps(1, start);  
  }

  29% {
    background-image: url("../IMAGES/cancha5.png");
    animation-timing-function: steps(1, start);  
  }

  36% {
    background-image: url("../IMAGES/cancha6.png");
    animation-timing-function: steps(1, start);  
  }

  43% {
    background-image: url("../IMAGES/cancha7.png");
    animation-timing-function: steps(1, start);  
  }

  50% {
    background-image: url("../IMAGES/cancha8.png");
    animation-timing-function: steps(1, start);  
  }

  57% {
    background-image: url("../IMAGES/cancha9.png");
    animation-timing-function: steps(1, start);  
  }

  63% {
    background-image: url("../IMAGES/cancha10.png");
    animation-timing-function: steps(1, start);  
  }

  70% {
    background-image: url("../IMAGES/cancha11.png");
    animation-timing-function: steps(1, start);  
  }

  77% {
    background-image: url("../IMAGES/cancha12.png");
    animation-timing-function: steps(1, start);  
  }

  84% {
    background-image: url("../IMAGES/cancha13.png");
    animation-timing-function: steps(1, start);  
  }

  91% {
    background-image: url("../IMAGES/cancha14.png");
    animation-timing-function: steps(1, start);  
  }

  100% {
    background-image: url("../IMAGES/cancha.png");
    animation-timing-function: steps(1, start);  
     }
  }
}

Y este mi código de HTML y JavaScript (sé que el código de javascript son solo mensajes por consola así que dudo de que sea el problema, pero lo pongo por si acaso). Supongo que el error estará en animation-timing-function: step-start; pero no sé como solucionarlo:

<!DOCTYPE html>
<html>
<head>
    <title>BASKETBALL</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../CSS/principal.css">
</head>
<script type="text/javascript">
$(document).ready(function(){
    var container = document.getElementById('container');

    container.addEventListener("animationstart", listener, false);
    container.addEventListener("animationend", listener);
    container.addEventListener("animationiteration", listener, false);


    function listener(container){
        switch(container.type) {
            case "animationstart":
                console.log("Started: elapsed time is ");
                break;
            case "animationend":
                console.log("Ended: elapsed time is ");
                break;
            case "animationiteration":
                console.log("New loop started at time ");
                break;
        }
    }

});
</script>
<body>
    <div id="container"></div>
</body>
</html>

En caso de que tengáis alguna duda sobre el código no dudéis en preguntármela. Gracias


Hola, que navegador estás usando? Podrías fijarte si en un navegador distinto tiene el mismo desperfecto por favor? – Genarito

Estoy usando Chromium y en Chrome me pasa lo mismo.En firefox no lo he probado porque no sé que cosas he de modificar para que funcione.

Las imágenes son todas 1000x544 y todas pesan casi lo mismo, entre 580KB y casi 600KB. Tengo un MSI con un procesador Intel i-7, así que supongo que sí que tiene la potencia suficiente para cargar las imágenes.

2
  • 2
    Hola, que navegador estás usando? Podrías fijarte si en un navegador distinto tiene el mismo desperfecto por favor?
    – Genarito
    el 5 ene. 2017 a las 17:54
  • 1
    copio la respuesta de @Genarito y agrego. > Hola, que navegador estás usando? Podrías fijarte si en un navegador > distinto tiene el mismo desperfecto por favor? – Genarito Por experiencia creo que también podría ser el tamaño de las imágenes (en pixeles y peso (5-8mb)) ya que si se hace un reajuste al tamaño es un proceso que hace el navegador haciendo que sea mas lenta la animación, o puede ser que las imágenes pesan mucho y tarden en ser cargadas. Debido a estos dos anteriores si se agrega que la PC no tenga mucha potencia (procesador y memoria) también afecta en las transiciones.
    – eezzekl
    el 5 ene. 2017 a las 18:47

1 respuesta 1

2

En lugar hacer una animación modificando el fondo, podrías hacer una animación modificando imágenes dentro del contenedor.

Ejemplo:

@keyframes fadeInOut {
  0% {
    opacity:1;
  }
  17.5% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  92.5% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}
#container {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;
  overflow: hidden;
}
#container img {
  position:absolute;
  left:0;
  width: 100%;
}

#container img {
  animation-name: fadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 8s;
}
#container img:nth-of-type(1) {
  animation-delay: 6s;
}
#container img:nth-of-type(2) {
  animation-delay: 4s;
}
#container img:nth-of-type(3) {
  animation-delay: 2s;
}
#container img:nth-of-type(4) {
  animation-delay: 0;
}
<div id="container">
  <img src="https://kbdevstorage1.blob.core.windows.net/asset-blobs/19201_en_1"/>
  <img src="https://kbdevstorage1.blob.core.windows.net/asset-blobs/19889_en_1"/>
  <img src="https://ioyby2hf25e3sg55t3muegr1-wpengine.netdna-ssl.com/wp-content/uploads/2015/10/calm-boat-wallpaper.jpg"/>
  <img src="http://www.highreshdwallpapers.com/wp-content/uploads/2012/02/Windows-Vista-Beach-Wallpaper-1024x768.jpg"/>
</div>

Para utilizar "n" imágenes deber hacer los siguientes cálculos:

n = 4 // Total imagenes
a = 1.4s // Tiempo que se vera una imagen
b = .6s // Tiempo desvanecimiento entre imágenes

t = (a+b)*n => 8s // Tiempo total de la animación (eg: animation-duration)
d = (a+b) => 2s // Tiempo de retardo de la animación (eg: animation-delay)

Porcentajes del Keyframes:

0%
a/t*100% => 17.5%
(a+b)/t*100% => 25%
100%-(b/t*100%) => 92.5%
100%

Fuente: Cross fading images

9
  • 1
    Me gusta mucho tu aporte, pero no entiendo como calcular n porcentajes :8. Ahí solo calculas 3.
    – largoWinch
    el 5 ene. 2017 a las 19:51
  • Los keyframes siempre son la misma cantidad ya que sirven solo para aplicar el tiempo de desvanecimiento.
    – Marcos
    el 5 ene. 2017 a las 19:54
  • Y que quieres decir con nth-of-type(1). Son siempre los mismos? O de que depende?
    – largoWinch
    el 5 ene. 2017 a las 20:04
  • @AdrianRodriguez, el psuedo-selector :nth-of-type(x) de CSS permite seleccionar el elemento x del tipo indicado (en este caso img) dentro del contenedor.
    – Marcos
    el 5 ene. 2017 a las 20:11
  • Pero siempre serán hasta nth-of-type(4) o eso dependerá de cuantas imagenes tengas? Lo pregunto porque solo me salen 4 imágenes de las 14 que tengo.
    – largoWinch
    el 5 ene. 2017 a las 20:16

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.