我有一个
，用作幻灯片图片容器。将在容器中显示的图像是不同大小的，并且应用为背景图像，而不是容器内部的![]()
元素，以便：
我可以通过媒体查询随时更换图像集
背景可以动画制作幻灯片效果
我使用background-size：cover和background-clip：content-box，这些都正确地保持了图像在容器所需区域内，确保过量被正确剪切。
第一个问题是，在CSS动画期间，当一个图像转换到另一个图像时，新图像会在该关键帧的时间内调整大小。我想要的是下一张图像只是过渡到（已经适当大小），而不是看到它重新调整大小。
实际上，我甚至不确定为什么首先会出现交叉淡化可视化，因为我没有指示这样做（也许是内置的-webkit-动画？）。我本来认为你只会看到从一个图像立即更改为下一个图像。我实际上喜欢交叉淡化，但不知道它来自哪里，让我认为它与调整大小的问题有关。
第二个问题是，在幻灯片秀的第一次迭代（仅限）中，图像会闪烁并短暂显示容器元素的白色背景颜色。因为这只发生在第一次迭代中，所以我认为可能是图像的初始下载时间的问题，并且在随后的迭代中会消失。然而，当我添加了一些JavaScript来预加载幻灯片展示前的图片时，发现了相同的问题。此外，一旦您运行幻灯片展示，您就会将图像保存在缓存中，当您刷新页面（它将仅从缓存中获取图像，是的，我正在通过从自己的测试服务器获取文件进行测试，以便它们将正确缓存）时，闪烁会再次发生。
我看到过一些关于使用preserve3d等各种CSS属性设置消除闪烁的帖子，但没有任何帮助。
我在Windows 10上使用Chrome 62.0.3202.94桌面版。
第一个问题是，在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>我意识到我可以使用其他各种技术来规避这些问题（例如JavaScript，堆叠<img>元素并管理透明度等），但我真的想了解是什么原因导致了这两个问题。