CSS3 diaporama，如何让变化渐变？

Question

我正在制作一个纯粹的 diaporama css，到目前为止还不错，但是每张图片都会突然切换到另一张，我正在尝试逐渐改变（一张图片慢慢消失，而另一个出现了）。

我已经尝试了所有计时函数（除了 cubic-bezier，因为我还不太确定如何使用它）但它没有用。

如何让变化渐进？我看到有人只使用 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>

感谢您的回答！

Answer 1

我不知道大多数浏览器是否可以逐渐解释 background-image 中的变化...他们如何解释该变化？这应该意味着图片从顶部滑动，它应该意味着淡入淡出 out/fade，它应该意味着新图片在旧图片上方淡入吗？

我认为你需要制作淡入淡出的动画 out/in（下面的代码可能无法正常工作，它只是给你一个想法）：

@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 并单独设置每个动画。

Answer 2

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 或 Less）的预处理器来生成 nth-child 部分甚至动画块

CSS3 diaporama，如何让变化渐变？

CSS3 diaporama, how to make the change gradual?

html

css

keyframe

css-animations