CSS背景图片动画闪烁

Question

我写了这个@keyframes动画，几秒钟后会改变背景颜色。

@keyframes banner{
0% {background-image: url(../img/1.jpg);}
18% {background-image: url(../img/2.jpg);}
36% {background-image: url(../img/3.jpg);}
54% {background-image: url(../img/4.jpg);}
72% {background-image: url(../img/5.jpg);}
100% {background-image: url(../img/6.jpg);}}

我随后将其添加到我的正文中。

background-image: url(../img/1.jpg);
animation-name: banner;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-direction: alternate;
perspective: 1000;
background-attachment: fixed;

问题在于，每当一张图片切换到另一张时，即使有淡出效果，仍会出现短暂的闪烁，但在动画第一次运行后似乎就消失了。

- ThomasStringer

Answer 1

如果大小对你不重要，你应该尝试使用Data URI。

https://css-tricks.com/data-uris/

@keyframes banner{
0% {background-image:  url(data:image/png;base64,iVB......gg==);}
18% {background-image:  url(data:image/png;base64,iVB......gg==);}
36% {background-image:  url(data:image/png;base64,iVB......gg==);}
54% {background-image:  url(data:image/png;base64,iVB......gg==);}
72% {background-image:  url(data:image/png;base64,iVB......gg==);}
100% {background-image:  url(data:image/png;base64,iVB......gg==);}}

CSS立即加载图像

- Sungwoo

---

在添加任何链接之前，您应该添加代码示例。 - Gautam Rai

这个答案是一个问题的解决方案，您可以将图像转换为数据URI，并将其添加到CSS中，而不是文件路径。 - Martin

这个解决方案似乎可行。如何将图像URL转换为base64的示例可以在这里找到。 - Dror Bar

Answer 2

动画在第一次闪烁，因为每个背景图像都需要单独通过网络请求。根据每个背景图像的大小，最好将它们合并成一个精灵图像，然后动画改变位置。这是一个例子：

@keyframes banner{
0% { background-position: 0% 0%}
18% {background-position: 0% -100%}
36% {background-position: 0% -200%}
54% {background-position: 0% -300%}
72% {background-position: 0% -400%}
100% {background-position: 0% -500%}}

background-image: url(../img/123456-combined.jpg);
animation-name: banner;
animation-duration: 20s; 
animation-iteration-count: infinite;
animation-direction: alternate;
perspective: 1000;
background-attachment: fixed;

我为“x”和“y”设置的值只是为了向您展示如何定位图像。但是，根据您创建精灵的方式，您需要将它们更改为显示指定持续时间内图像的任何位置。

如果这不是您要寻找的内容，可以尝试将一系列DIV设置为每个背景图像。使用z-index使每个DIV覆盖在前一个上面。然后，您可以动画化每个DIV的alpha以显示下面的那个。由于每个DIV必须浮在前面，因此必须使用“position: fixed”，因此我不能说这是移动设备的最佳选项。移动浏览器倾向于对固定元素产生反应。

- Dondrey Taylor

---

那听起来实际上会完美地运作。谢谢你。如果这是个问题，我可能会尝试叠加DIV的方法。我想我之前确实尝试过，但背景图片没有显示，因为DIV是空的或者其他什么原因 :/ - ThomasStringer

在这种情况下，无法在图像之间使用CSS淡入淡出效果。 - Martin

Answer 3

我也发现了一些非常简单的方法，对我很有效：

let images = [];
for (let i = 1; i <= 6; i++) {
    images.push(new Image());
}
for (let i = 1; i <= 6; i++) {
    images[i].src = `../img/${i}.png`;
}

图片对象创建了一个img标签，然后您可以将其src设置为图像文件的路径。之后，您可以像第一次那样做，而且完全没有闪烁，甚至可以删除图像数组，因为所需的请求已经完成。

- Κωνσταντινος Χαφης

---

这与我所做的方式（预加载）类似。唯一奇怪的是，即使Div已经具有完整的高度，我还必须将“height:100％”添加到我正在交换的动画中（我的动画是按需而非定时器触发的）。 - Mark Brittingham

Answer 4

我有一个类似的问题，'animation-delay'属性的负值解决了它。动画将从仿佛已经播放了3秒钟开始，并且只有第一次迭代的闪烁被隐藏。

在我的情况下，我有3个背景图像。

animation-duration: 10s;
animation-delay: -3s;
animation-iteration-count: infinite;

- user2477732

Answer 5

第一次迭代是问题所在，为什么不用相同的动画运行：

animation-duration: 1s;
animation-iteration-count: 1;

当然，它是在另一层中隐藏的。显然，这个层必须与你使用的层是同一类，并且不能是display: none;，所以你应该用z-index属性或width:0; height:0;来隐藏它。这样，你就可以摆脱第一个无人观看的运行。

- Xvarea