CSS - Parpadeo en transición de imágenes

 
Vista:
Imágen de perfil de Adelmo
Val: 24
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

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
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");
    }
}
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.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Parpadeo en transición de imágenes

Publicado por joel (252 intervenciones) el 25/03/2021 10:36:43
Hola Adelmo, si te fijas, ese parpadeo, es el tiempo que tarda en cargar la imagen... si te fijas, una vez ya las ha cargado, en la segunda pasada ya no lo hace.

he estado buscando la manera de precargar las imágenes, pero en el keyframe siempre las vuelve a cargar nuevamente del servidor...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Adelmo
Val: 24
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Parpadeo en transición de imágenes

Publicado por Adelmo (6 intervenciones) el 27/03/2021 16:07:23
Eso me imaginé, muchas gracias por tu respuesta.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar