I had a question. I wanted to get my website background to change using keyframes. That's why I used animation-timing-function: step-start; . The problem is that it does change, but at each change there is a horrible white flicker, as if the image is removed and the background is visible. I wish there was no flickering. 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 here's my HTML and JavaScript code (I know the javascript code is just console messages so I doubt that's the problem, but I'm posting it just in case). I guess the error will be in animation-timing-function: step-start; but I don't 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>
If you have any questions about the code, don't hesitate to ask me. Thank you
Hi, what browser are you using? Could you see if it has the same problem in a different browser, please? – Genarito
I'm using Chromium and the same thing happens to me in Chrome. I haven't tried it in Firefox because I don't know what things I have to modify to make it work.
The images are all 1000x544 and they all weigh about the same, between 580KB and almost 600KB. I have an MSI with an Intel i-7 processor, so I guess it does have enough power to load the images.
Instead of making an animation by changing the background, you could make an animation by changing images inside the container.
Example:
To use "n" images you must do the following calculations:
Keyframe percentages:
Source: Cross fading images