Parpadeo en transición de imágenes
Publicado por Adelmo (6 intervenciones) el 25/03/2021 01:55:07
Buen día compañeros, estoy haciendo que el fondo de un div me funcione como una diapositiva, utilizando este código
todo funciona de maravilla, el problema es que cuando hace la primera carga me lanza unos parpadeos del color del fondo (es decir que el body o el html tienen un color en especifico ese color lo hace como parpadeo), probé con imágenes no muy pesadas, aproximadamente 80KB la más grande, porque pensé que era por el tiempo de carga de la imagen, pero el problema aun persiste, cabe mencionar que cuando reinicia el ciclo, este problema ya no aparece, normalmente lo hace con las imágenes 2 y 3 (de vez en cuando con la 1). Muchas gracias de antemano.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.fondo {
width: 100%;
height: 100%;
overflow: hidden;
background-image: url("patt1.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
animation: slide 20s infinite;
}
@keyframes slide {
0% {
background-image: url("patt1.jpg");
}
25% {
background-image: url("patt2.jpg");
}
50% {
background-image: url("patt3.jpg");
}
75% {
background-image: url("patt4.jpg");
}
}
Valora esta pregunta


0