CSS3 diaporama，如何让变化渐变？答案

【问题标题】：CSS3 diaporama, how to make the change gradual?CSS3 diaporama，如何让变化渐变？
【发布时间】：2018-02-07 21:53:40
【问题描述】：

我正在用纯 css 制作一个 diaporama，到目前为止一切都很好，但是每张图片都会突然更改为另一张，我正在尝试使更改逐渐变化（一张图片慢慢消失，而另一张出现）。

我已经尝试过所有的计时功能（除了三次贝塞尔曲线，因为我还不太清楚如何使用它）但没有奏效。

如何让变化渐进？我见过有人只用 css3 做，但我无法重现它。

这是css 和html

.diapo {
  width: 350px;
  height: 150px;
  border: 3px solid #544B4D;
  background-image: url("http://via.placeholder.com/350x150/F00");
  background-size: 350px 150px;
  animation-name: diapo1;
  animation-duration: 9s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: normal;
}

@keyframes diapo1 {
  0% {
    background-image: url("http://via.placeholder.com/350x150/F00");
  }
  33% {
    background-image: url("http://via.placeholder.com/350x150/0F0");
  }
  66% {
    background-image: url("http://via.placeholder.com/350x150/00F");
  }
}

<body>
  <div class="diapo">
  </div>
</body>

感谢您的任何回答！

【问题讨论】：

我已经用公开图片更新了你的问题，结果证明它对我有用。（Mac + 最新的 Chrome）
tbh，我认为您做得不对，但是以正确的方式回答会花费太多时间。基本上，您的 DOM 中应该有多个图像并为它们的不透明度设置动画。然后你只需为它们中的每一个设置不同的动画延迟。根据您拥有的图像数量进行一些计算，您应该很高兴
感谢您的编辑。这里还是新的。它确实有效，但不是渐进式的！会是因为 Mozilla 58 吗？
我的设置是渐进的
我觉得ff不支持这个

标签： html css css-animations keyframe

【解决方案1】：

IMO，最好的解决方案是在 DOM 中使用多个 img 并结合一些不透明动画：

.container {
  position: relative;
  /* Define size on the container: (best if aligned with images size) */
  width: 350px;
  height: 150px;
  box-sizing: content-box;
  
  /* fancy stuff, not required */
  border: 1px solid #000;
  border-radius: 5px;
  overflow: hidden;
}

.container > img {
  height: inherit;
  width: inherit;
  
  /* images are stacked on top of each other */
  position: absolute;
  top: 0;
  left: 0;
  
  opacity: 0;
  
  /* 10s is total time (time for a complete cycle) */
  animation: fadeInOut 10s infinite;
}

.container > img:nth-child(2) {
  animation-delay: 3.33s; /* totalTime * 1/3 */
}
.container > img:nth-child(3) {
  animation-delay: 6.66s; /* totalTime * 2/3 */
}

/* choose a % of anim time allocated to transition,
let's call it transTime. Here it's 10%. */
@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  /* transTime */
  10% {
    opacity: 1;
  }
  /* transTime + (100% / image count) */
  43% {
    opacity: 1;
  }
  /* previous + transTime */
  53% {
    opacity: 0;
  }
}

<div class="container">
  <img src="http://via.placeholder.com/350x150/F00"/>
  <img src="http://via.placeholder.com/350x150/0F0"/>
  <img src="http://via.placeholder.com/350x150/00F"/>
</div>

我强烈建议您使用允许变量和循环（可能是 SCSS 或更少）生成 nth-child 部分甚至动画块的预处理器

【讨论】：

【解决方案2】：

我不知道大多数浏览器可以逐渐解释背景图像的变化......他们如何解释这种变化？是指图片从顶部滑出，还是淡出/淡入，还是新图片在旧图片上方淡入？

我认为您需要为淡出/淡入设置动画（下面的代码可能无法按原样工作，只是为了给您一个想法）：

@keyframes diapo1 {
  0% {
    background-image: url("pics-about-us/a-u1.jpeg");
  }
  30% { opacity:1;}
  33% {
    background-image: url("pics-about-us/a-u3.jpeg");
    opacity:0;
  }
  36% {opacity:1}
  //etc...

如果你想对整个动画进行渐变，我会在每个背景图像上使用<div> child，并单独为每个动画制作动画。

【讨论】：