Change background image without fade

Question

Good afternoon, in a site I’m creating has this image as "background image" in a div.

I’m trying to make some of the windows in the buildings blink, to have a nice effect, animation in the buildings. For this, I did in CSS:

#divprediocima {
background-image: url("../img/prediocima.png");
width: 972px;
height: 276px;
margin: auto;
margin-top: -40px;
animation-name: prediocima;
animation-duration: 20s;
animation-delay: 4s;
animation-iteration-count: infinite;
}

@keyframes prediocima {
0%   {background-image: url("../img/prediocima.png");}
30%  {background-image: url("../img/prediocima1.png");}
70%  {background-image: url("../img/prediocima2.png");}
90% {background-image: url("../img/prediocima.png");}
100% {background-image: url("../img/fundo.png");}
}

As I have this photo in vector, I’ve been taking some windows and saving like other png photos, ie I have 3 png files some with more windows and others less windows.

Turns out, is changing the background with a fade out effect, then when it will change the background, the window fades slowly, getting clear as even the photo shows in some windows... This is not getting good.

How do I make the background image change without having any effect? Does anyone know?

Answer 1

You can use this technique:

@keyframes prediocima {

0%   {background-image: url("prediocima.png");}
30%   {background-image: url("prediocima.png");}
30.01%  {background-image: url("prediocima1.png");}

70%  {background-image: url("prediocima1.png");}
70.01%  {background-image: url("prediocima2.png");}

90% {background-image: url("prediocima2.png");}
90.01% {background-image: url("prediocima.png");}

99.99% {background-image: url("prediocima.png");}
100% {background-image: url("fundo.png");}

}

But shorten your time in animation-duration: 20s; for something around 5s.

See the effect working below with colors instead of images (just as an example):

#divprediocima {
background: blue;
width: 200px;
height: 200px;
margin: auto;
margin-top: -40px;
animation-name: prediocima;
animation-duration: 5s;
animation-delay: 4s;
animation-iteration-count: infinite;

}

@keyframes prediocima {
/*
0%   {background-image: url("prediocima.png");}
30%   {background-image: url("prediocima.png");}
30.01%  {background-image: url("prediocima1.png");}

70%  {background-image: url("prediocima1.png");}
70.01%  {background-image: url("prediocima2.png");}

90% {background-image: url("prediocima2.png");}
90.01% {background-image: url("prediocima.png");}

99.99% {background-image: url("prediocima.png");}
100% {background-image: url("fundo.png");}
*/

0%   {background: blue;}
30%   {background: blue;}
30.01%  {background: yellow;}

70%  {background: yellow;}
70.01%  {background: red;}

90% {background: red;}
90.01% {background: blue;}

99.99% {background: blue;}
100% {background: gray;}

}

<div id="divprediocima">
</div>