如何在動畫改變背景圖像時擺脫白色閃光？

該代碼使得網站的背景圖像在5個不同的圖像之間轉換，但每次動畫完成並且下一個動畫開始時都會有白色閃光。我如何擺脫它，或者我做錯了什麼？我不確定如何用其他方式解釋它。如何在動畫改變背景圖像時擺脫白色閃光？

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

來源

2017-09-05 Snase

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

你必須預裝您的圖像：

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

來源

2017-09-05 06:55:32 Huelfe

感謝那些固定它！ – Snase

如何在動畫改變背景圖像時擺脫白色閃光？

回答

相關問題