保持CSS动画期间调整背景图像的大小并消除闪烁
我有一个我用作幻灯片放映图像容器的<div> 。 将显示在容器中的图像大小不同，并应用为背景图像，而不是容器内的<img>元素，以便：
我有background-size:cover和background-clip:content-box ，这些都正确地保持图像在容器的所需区域，确保多余的剪辑适当。
第一个问题是，在CSS动画期间，当一个图像转换到另一个图像时，新图像将在该关键帧的时序过程中调整大小。 我希望下一张图片能够过渡到（在适当尺寸的情况下），而不会看到它调整大小。
实际上，我甚至不确定为什么首先有一个交叉淡化的可视化，因为我没有指示要做（可能是内置的-webkit-动画？）。 我原以为你会看到从一幅图像到另一幅图像的直接变化。 我实际上喜欢交叉淡入淡出，但不知道它来自哪里，这让我觉得它与调整大小问题有关。
第二个问题是，在幻灯片放映的第一次迭代期间，图像会闪烁，并简要显示容器元素的白色背景颜色。 因为这只发生在第一次迭代中，所以我认为这可能是图像初始下载时间的问题，这就是为什么它在后续迭代中消失的原因。 但是，事实并非如此，当我在幻灯片放映开始之前添加了一些JavaScript预加载图像并找到相同的问题时。 另外，一旦你运行了这个节目，你就可以在你的缓存中获得图像，当你刷新页面时（它只会从你的缓存中获取图像，是的，我通过从我自己的测试服务器获取文件来测试它）缓存正确）闪烁再次发生。
我已经看到一些关于使用preserve3d等消除各种CSS属性设置闪烁的帖子，但没有一个帮助。
我在Windows 10上使用Chrome 62.0.3202.94桌面。
#outerFrame {
background-color: #22130c;
box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,.2),
inset 0 -2px 1px hsla(0,0%,0%,.4),
0 5px 50px hsla(0,0%,0%,.25),
0 20px 20px -15px hsla(0,0%,0%,.2),
0 30px 20px -15px hsla(0,0%,0%,.15),
0 40px 20px -15px hsla(0,0%,0%,.1);
padding: 1.5em;
overflow: auto;
float: left;
margin: 0 1em 1em 0;
}
#innerFrame {
background-color: #fff5e5;
box-shadow: 0 2px 1px hsla(0,0%,100%,.2),
0 -1px 1px 1px hsla(0,0%,0%,.4),
inset 0 2px 3px 1px hsla(0,0%,0%,.2),
inset 0 4px 3px 1px hsla(0,0%,0%,.2),
inset 0 6px 3px 1px hsla(0,0%,0%,.1);
padding: 1.5em;
}
/* This is the relevant style: */
#innermostFrame {
padding: .75em;
background-color: #fff;
box-shadow: 0 -1px 0 2px hsla(0, 0%, 0%,.03);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size:cover;
background-clip: content-box;
animation: cycle 8s ease-in-out infinite;
width: 30vw;
height:40vh;
min-width: 200px;
max-width: 900px;
}
@keyframes cycle {
0% { background-image: url("https://picsum.photos/200/300/?random"); }
25% { background-image: url("https://picsum.photos/640/480/?random"); }
50% { background-image: url("https://picsum.photos/1900/1200/?random"); }
75% { background-image: url("https://picsum.photos/480/200/?random"); }
100% { background-image: url("https://picsum.photos/600/300/?random"); }
}<div id="outerFrame">
<div id="innerFrame">
<div id="innermostFrame"></div>
</div>
</div>1. Crossfade：
发生这种情况是因为浏览器试图在关键帧之间进行动画制作。 如果我们看看你的@keyframes循环，我们看到你每25％创建一个关键帧。 这意味着浏览器将从0％增加到25％。 它会产生什么动画？ 改变的背景。 它将如何动画？ 交叉淡入淡出。 此外，背景大小再次覆盖div（使用的图片格式不同 - 如果使用相同的格式 - 这可能不会发生）。
@keyframes cycle {
0% { background-image: url("https://picsum.photos/200/300/?random"); }
25% { background-image: url("https://picsum.photos/640/480/?random"); }
50% { background-image: url("https://picsum.photos/1900/1200/?random"); }
75% { background-image: url("https://picsum.photos/480/200/?random"); }
100% { background-image: url("https://picsum.photos/600/300/?random"); }
}
解决方案A（不交叉渐变和白色背景）
您可以通过让动画几乎瞬间发生而摆脱调整大小：
0% { background-image: url("https://picsum.photos/200/300/?random"); }
24.99% { background-image: url("https://picsum.photos/200/300/?random"); }
25% { background-image: url("https://picsum.photos/640/480/?random"); }
关键帧0％中的背景在关键帧24.99％处相同，因此不会生成动画。 然后它变化为25％（这看起来像是瞬间变化）请参阅下面的工作片段：
#outerFrame {
background-color: #22130c;
box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,.2),
inset 0 -2px 1px hsla(0,0%,0%,.4),
0 5px 50px hsla(0,0%,0%,.25),
0 20px 20px -15px hsla(0,0%,0%,.2),
0 30px 20px -15px hsla(0,0%,0%,.15),
0 40px 20px -15px hsla(0,0%,0%,.1);
padding: 1.5em;
overflow: auto;
float: left;
margin: 0 1em 1em 0;
}
#innerFrame {
position: relative;
background-color: #fff5e5;
box-shadow: 0 2px 1px hsla(0,0%,100%,.2),
0 -1px 1px 1px hsla(0,0%,0%,.4),
inset 0 2px 3px 1px hsla(0,0%,0%,.2),
inset 0 4px 3px 1px hsla(0,0%,0%,.2),
inset 0 6px 3px 1px hsla(0,0%,0%,.1);
padding: 1.5em;
}
/* This is the relevant style: */
#innermostFrame{
padding: .75em;
background-color: #fff;
box-shadow: 0 -1px 0 2px hsla(0, 0%, 0%,.03);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size:cover;
background-clip: content-box;
animation: cycle 8s ease-in-out infinite;
width: 30vw;
height:40vh;
min-width: 200px;
max-width: 900px;
}
@keyframes cycle {
0% { background-image: url("https://picsum.photos/200/300/?random"); }
24.99% { background-image: url("https://picsum.photos/200/300/?random"); }
25% { background-image: url("https://picsum.photos/640/480/?random"); }
49.99% { background-image: url("https://picsum.photos/640/480/?random"); }
50% { background-image: url("https://picsum.photos/1900/1200/?random"); }
74.99% { background-image: url("https://picsum.photos/1900/1200/?random"); }
75% { background-image: url("https://picsum.photos/480/200/?random"); }
99.99% { background-image: url("https://picsum.photos/480/200/?random"); }
100% { background-image: url("https://picsum.photos/200/300/?random"); }
}<div id="outerFrame">
<div id="innerFrame">
<div id="innermostFrame"></div>
</div>
</div>上一篇: Keep Background Image from Resizing During CSS Animation and Remove Flicker