Comment se débarrasser du flash blanc lors du changement d'image de fond avec animation?

Le code fait en sorte que l'image d'arrière-plan du site transite entre 5 images différentes, mais chaque fois qu'une animation est terminée et que l'animation suivante commence, il y a un flash blanc. Comment puis-je m'en débarrasser ou qu'ai-je fait de mal? Je ne suis pas sûr de savoir comment l'expliquer autrement.Comment se débarrasser du flash blanc lors du changement d'image de fond avec animation?

@keyframes backswitch { 
 
    0% { 
 
    background-image: url("background.jpg"); 
 
    } 
 
    20% { 
 
    background-image: url("background_2.jpg"); 
 
    } 
 
    40% { 
 
    background-image: url("background_3.jpg"); 
 
    } 
 
    60% { 
 
    background-image: url("background_4.jpg"); 
 
    } 
 
    80% { 
 
    background-image: url("background_5.jpg"); 
 
    } 
 
    100% { 
 
    background-image: url("background_6.jpg"); 
 
    } 
 
} 
 

 
body { 
 
    /*Adjusting images and animation*/ 
 
    background-repeat: no-repeat; 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    background-size: cover; 
 
    animation-name: backswitch; 
 
    animation-duration: 60s; 
 
    animation-iteration-count: infinite; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 
</body> 
 

 
</html>

Source

2017-09-05 Snase

https://codepen.io/vavik96/pen/yyKoag –

Vous devez précharger vos images:

@keyframes backswitch { 
 
    0% {background-image: url("https://dummyimage.com/300/ccc/fff.png");} 
 
    20% {background-image: url("https://dummyimage.com/300/3f5/fff.png");} 
 
    40% {background-image: url("https://dummyimage.com/300/71c/fff.png");} 
 
    60% {background-image: url("https://dummyimage.com/300/228/fff.png");} 
 
    80% {background-image: url("https://dummyimage.com/300/c11/fff.png");} 
 
    100% {background-image: url("https://dummyimage.com/300/544/fff.png");} 
 
} 
 
body { 
 
    /*Adjusting images and animation*/ 
 
    background-repeat: no-repeat; 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    background-size: cover; 
 
    animation-name: backswitch; 
 
    animation-duration: 60s; 
 
    animation-iteration-count: infinite; 
 
} 
 

 
div.preload-images { 
 
    background: url("https://dummyimage.com/300/ccc/fff.png") no-repeat -9999px -9999px; 
 
    background: url("https://dummyimage.com/300/ccc/fff.png") no-repeat -9999px -9999px, 
 
    url("https://dummyimage.com/300/3f5/fff.png") no-repeat -9999px -9999px, 
 
    url("https://dummyimage.com/300/71c/fff.png") no-repeat -9999px -9999px, 
 
    url("https://dummyimage.com/300/228/fff.png") no-repeat -9999px -9999px, 
 
    url("https://dummyimage.com/300/c11/fff.png") no-repeat -9999px -9999px, 
 
    url("https://dummyimage.com/300/544/fff.png") no-repeat -9999px -9999px; 
 
}

<body> 
 
    <div class="preload-images"></div> 
 
</body>

Source

2017-09-05 06:55:32 Huelfe

Merci qui le fixe ! – Snase

Comment se débarrasser du flash blanc lors du changement d'image de fond avec animation?

Répondre

Questions connexes