在CSS动画期间保持背景图像不会调整大小并删除闪烁

我可以根据需要通过媒体查询交换图像集

可以动画背景以产生幻灯片效果

我有background-size:cover并且background-clip:content-box这些正确地将图像保持在容器的所需区域内,确保正确地剪掉多余的部分.

第一个问题是在CSS动画期间,当一个图像转换到另一个图像时,新图像会在该关键帧的时间过程中调整大小.我想要的是将下一个图像转换为(已经适当的大小),而不会看到它调整大小.

实际上,我甚至不确定为什么首先会出现交叉淡入淡出可视化,因为我没有指示这样做(也许是内置-webkit-动画？).我原以为你只会看到从一张图片到另一张图片的即时更改.我实际上喜欢交叉淡入淡出,但不知道它来自哪里让我觉得它与调整大小问题有关.

第二个问题是在幻灯片放映的第一次迭代期间(仅),图像闪烁,并且简要地示出了容器元素的白色背景颜色.因为这只发生在第一次迭代时,我认为这可能是图像初始下载时间的问题,这就是为什么它在后续迭代中消失的原因.但是,当我在幻灯片放映开始之前添加一些Javascript来预加载图像并发现同样的问题时,事实证明并非如此.此外,一旦你运行节目,你有缓存中的图像和刷新页面(这将只是从你的缓存中获取图像,是的,我通过从我自己的测试服务器获取文件来测试它,所以他们将正确缓存)闪烁再次发生.

我已经看过一些关于使用各种CSS属性设置来消除闪烁的帖子preserve3d,但这些都没有帮助.

我在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");   }
}