CSS三幅图像淡入动画持续时间

如何解决CSS三幅图像淡入动画持续时间

我对多个图像的CSS淡入动画感到困惑。我以为我已经找到了约翰·培根（John Bacon）的codepen https://codepen.io/johnbacon/pen/wgYOXW的解决方案，但我不知道如何使用三张图片而不是四张图片。我希望我的三个图像中的每一个都显示30秒，然后淡出下一个图像，并且我不能有一段时间没有图像显示。

HTML

enter code here
<div class="image-container">
<img src="https://placehold.it/450x280?text=Image 1" />
<img src="https://placehold.it/450x280?text=Image 2" />
<img src="https://placehold.it/450x280?text=Image 3" />
<img src="https://placehold.it/450x280?text=Image 4" />
</div>

CSS

.image-container {
position: relative;

img {
position: absolute;
animation-name: multiple-image-crossfade;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 8s;
&:nth-of-type(1) {
animation-delay: 6s;
}
&:nth-of-type(2) {
animation-delay: 4s;
}
&:nth-of-type(3) {
animation-delay: 2s;
}
&:nth-of-type(4) {
animation-delay: 0;
}
}
}

@keyframes multiple-image-crossfade {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}

我没有可用的SASS，因此我尝试将其转换为CSS，如下所示：

    .image-container {
    height: 280px;
    position: relative;
    }
    .image-container img {
    position: absolute;
    animation-name: multiple-image-crossfade;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 120s;
    }
    .image-container img .image-container:nth-of-type(1) {
    animation-delay: 90s;
    }
    .image-container img .image-container:nth-of-type(2) {
    animation-delay: 60s;
    }
    .image-container img .image-container:nth-of-type(3) {
    animation-delay: 30s;
    }
   .image-container img .image-container:nth-of-type(4) {
   animation-delay: 0s;
   }

   @keyframes multiple-image-crossfade {
   0% {
   opacity: 1;
   }
   17% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  92% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
  }

这在我的测试网站上无效：https://rbbt.net/sds-fcm/sds-tyler/index.htm 我在做什么错了？

解决方法

动画总时间由以下公式计算： 30s * 4 = 120s // 4张图像的时间为30s。

• 第一个图片以0s（0s-30s）开头

• 第二张图片以30秒（30秒-60秒）开头

• 第三张图片始于60s（60s-90s）

• 第四张图片以90s（90s-120s）开头

即

在 SCSS

中

marker.setIcon

在 CSS

中

.image-container {
  position: relative;
  
  img {
    position: absolute;
    animation-name: multiple-image-crossfade;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 120s;
    &:nth-of-type(1) {
      animation-delay: 90s;
    }
    &:nth-of-type(2) {
      animation-delay: 60s;
    }
    &:nth-of-type(3) {
      animation-delay: 30s;
    }
    &:nth-of-type(4) {
      animation-delay: 0s;
    }
  }
}

SCSS 中的Codepen演示：https://codepen.io/Rayeesac/pen/MWyjrOJ

CSS 中的Codepen演示：https://codepen.io/Rayeesac/pen/ExKNBQx