Question

我写了这个@keyframes动画来在几秒钟后改变背景。

Texture2D texture;
protected override void LoadContent()
        {
...
         texture = Content.Load<Texture2D>("Tank");
...
        }
protected override void Draw(GameTime gameTime)
        {
...
         Rectangle destinationRectangle = new Rectangle(100, 100, 30, 10);
         spriteBatch.Draw(texture, destinationRectangle, Color.White);
...
         spriteBatch.End();
         base.Draw(gameTime);
        }

然后我把它添加到我的身体。

@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);}}

问题在于，无论何时图像切换到另一个图像，即使存在淡入淡出效果，仍然会出现分裂的第二个闪烁，这在第一次动画运行后似乎消失了。

Answer 1

首次迭代是问题所在，为什么不用简单的方法运行相同的动画：

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

在不同的图层上，当然是隐藏的。显然，图层必须与您正在使用的图层相同，并且不能display: none;，因此您应该使用z-index属性或width:0; height:0;隐藏图层。这样你就可以在没有人看的情况下摆脱第一次跑步。

Answer 2

我有一个类似的问题，“ animation-delay”属性的负值修复了它。动画将开始播放，就好像它已经播放了3秒钟一样，并且只隐藏了具有闪烁的第一次迭代。

就我而言，我有3张背景图片。

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

Answer 3

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

@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”，所以我不能说这是移动设备的最佳选择。移动浏览器倾向于抛弃固定元素。

Answer 4

如果尺寸对您不重要。您应该尝试Data URI

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

Answer 5

我也发现了一些对我有用的非常简单的东西：

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`;
}

Image对象创建一个img标签，然后可以将其src设置为图像的文件路径。之后，您可以一开始就做所有事情而不会闪烁，甚至可以删除images数组，因为所需的请求已经完成。

CSS背景图像动画闪烁

5 个答案: