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

前端之家收集整理的这篇文章主要介绍了html – 在CSS动画期间保持背景图像不会调整大小并删除闪烁前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个< div>我用作幻灯片放映图像容器.将在容器中显示的图像具有不同的尺寸并且被应用为背景图像,而不是< img>.容器内的元素,以便:

>我可以根据需要通过媒体查询交换图像集
>可以动画背景以产生幻灯片效果

我有背景大小:封面和背景剪辑:内容框,这些正确地将图像保持在容器的所需区域内,确保正确地剪掉多余的部分.

第一个问题是在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,.4),0 5px 50px hsla(0,.25),0 20px 20px -15px hsla(0,0 30px 20px -15px hsla(0,.15),0 40px 20px -15px hsla(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 -1px 1px 1px hsla(0,inset 0 2px 3px 1px hsla(0,inset 0 4px 3px 1px hsla(0,inset 0 6px 3px 1px hsla(0,.1);
  padding: 1.5em;
}

/* This is the relevant style: */
#innermostFrame {
  padding: .75em;
  background-color: #fff;
  Box-shadow: 0 -1px 0 2px hsla(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>元素和管理不透明等)来解决这些问题,但我真的想了解导致这两个问题的原因.

解决方法

1.交叉淡入淡出:

发生这种情况是因为浏览器尝试在关键帧之间设置动画.如果我们看看你的@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,.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,.1);
  padding: 1.5em;
}

/* This is the relevant style: */
#innermostFrame{
  padding: .75em;
  background-color: #fff;
  Box-shadow: 0 -1px 0 2px hsla(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>

请注意!最后一个关键帧(100%)应该设置为与第一个关键帧(0%)相同的值,因为我们希望循环从它停止的地方开始.实际上,这意味着在此示例中您只有4个不同的背景图像(如果您想要5个 – 取代20%的步长).

我们通过调整大小背景来解决问题.作为副作用,我们还“修复”了交叉渐变.真正的缺点是我们在动画第一次播放时仍然具有白色背景.

2.白色背景

我认为出现白色背景是因为需要首先加载图像.它们仅在动画运行时加载.这就是为什么第一次运行低谷有白色背景的原因.

解决方案B(交叉淡入淡出,无白色背景)

我们可以使用辅助div来获得交叉淡化效果.但我们必须在keframe中设置不透明度.我们可以在显示另一个div的同时在关键帧中设置背景图像 – 因此它有更多的时间加载并且不会出现白色背景.请参阅下面的代码段:

#outerFrame {
  background-color: #22130c;
  Box-shadow: inset 0 1px 1px 1px hsla(0,.1);
  padding: 1.5em;
}

/* This is the relevant style: */
#innermostFrame,#innermostFrame2{
  padding: .75em;
  background-color: #fff;
  Box-shadow: 0 -1px 0 2px hsla(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;
}
#innermostFrame2{
  position: absolute;
  top: 1.5em; /* padding of innerFrame */
  animation: cycle2 8s infinite;
  background-image: url("https://picsum.photos/200/300/?random"); 
}
@keyframes cycle {
  0%   { background-image: url("https://picsum.photos/640/480/?random"); }
  50%  { background-image: url("https://picsum.photos/640/480/?random"); }
  51%  { background-image: url("https://picsum.photos/480/200/?random"); }
  100% { background-image: url("https://picsum.photos/480/200/?random"); }
}
@keyframes cycle2 {
  15%  { opacity: 1;}
  25%  { opacity: 0; background-image: url("https://picsum.photos/200/300/?random"); }
  
  26%  { background-image: url("https://picsum.photos/1900/1200/?random");}
  40%  { opacity: 0;}
  50%  { opacity: 1;}
  65%  { opacity: 1;}
  75%  { opacity: 0; background-image: url("https://picsum.photos/1900/1200/?random");}
  
  76%  { background-image: url("https://picsum.photos/200/300/?random");}
  90%  { opacity: 0;}
  100% { opacity: 1;}
}
<div id="outerFrame">
  <div id="innerFrame">
    <div id="innermostFrame"></div>
    <div id="innermostFrame2"></div>
  </div>
</div>

解决方案B解释:

这个想法是让背景图像在显示之前加载.因此,有2个div具有2个@keyframe动画,导致背景平滑交替.

#innermostFrame2获得与#innermostFrame相同的宽度和高度,并且绝对定位(直接位于其上方). #innermostFrame2显示并隐藏了25%的动画持续时间.以下是可见的:

25%                25%               25%                25%
[ #innermostFrame2 - #innermostFrame - #innermostFrame2 - #innermostFrame ]

百分比:

已经为#innermostFrame2本身设置了背景图像 – 使其尽可能快地加载.在@keyframes cycle2中,不需要0%,因为背景已经设置并且可见.

我们希望图像显示25%的动画(4张图像).现在我决定在这个例子中10%的交叉淡入淡出看起来很好(8秒动画的10%是0.8秒).你可以做得更少或更多,因为这是一个品味的问题.这就是为什么动画的不透明度为1的15%和0的25%.在div不可见之后,我们立即将背景图像更改为26%,因此可以将其加载到CSS对象模型中.

#innermostFrame的背景现在可见(因为隐藏了#innermostFrame2).我们希望在动画持续时间的25%内显示此信息.因此,在50%时,我们希望#innermostFrame2再次以新背景显示.因为我决定交叉淡化动画持续时间的10%,我们从不透明度开始时为40%:0;.在#innermostFrame2完全显示(50%)之后,我们立即更改#innermostFrame的背景以加载它.这种情况发生在@keyframes周期的51%

原文链接:https://www.f2er.com/html/225560.html

猜你在找的HTML相关文章