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.