I had a doubt. I wanted to get the background of my web to change using keyframes. That's why I used animation-timing-function: step-start; . The problem is that it does change, but in each change there is a horrible white flicker, as if the image were removed and the background was seen. I wish there was not that flicker. This is my CSS code:
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);
}
}
}
And this is my HTML and JavaScript code (I know that the javascript code is only messages per console, so I doubt it's the problem, but I put it just in case). I guess the error will be in animation-timing-function: step-start; but I do not know how to fix it:
<!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>
In case you have any questions about the code do not hesitate to ask me. Thanks
Hello, what browser are you using? Could you see if a different browser has the same flaw please? - Genarito
I'm using Chromium and in Chrome the same thing happens to me. In firefox I have not tried it because I do not know what things I have to modify to make it work.
The images are all 1000x544 and all weigh almost the same, between 580KB and almost 600KB. I have an MSI with an Intel i-7 processor, so I guess it has enough power to load the images.