如何在动画改变背景图像时摆脱白色闪光？

该代码使得网站的背景图像在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

如何在动画改变背景图像时摆脱白色闪光？

回答

相关问题