Change background image without fade

Question

Change background image without fade

Navigation

#1 by (1 votes)

1

Good afternoon, in a site I'm creating this image has a "div".

I'mtryingtomakesomebuildingwindowsflicker,tohaveacooleffect,ananimationinthebuildings.Forthis,IdidinCSS:

#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 vector picture, I was taking some windows and saving like other png photos, ie I have 3 png files some with more windows and some less windows.

It turns out that the background is changing with a fade out effect, then when it changes background, the window fades away, becoming clear as the photo shows in some windows ... This is not getting legal. / p>

How do I change without having any effect? Does anyone know?

html css

asked by anonymous 25.11.2017 / 21:16

1 answer

How to assign a List to a DataTable correctly form windowns? How to select a radio through another?

score 1 · Accepted Answer

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 decrease the time in animation-duration: 20s; to something around 5s .

See the effect working below with colors instead of images (for example only):

#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>