Sna*_*ase 6 html css css-animations
该代码使站点的背景图像在 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>您必须预加载图像：
@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>