图像上的无限淡入淡出动画答案

【问题标题】：Infinite fade-in fade-out animation on the images图像上的无限淡入淡出动画
【发布时间】：2021-04-13 12:29:53
【问题描述】：

我必须在图像上显示无限淡入淡出动画。我尝试了下面的代码，但我认为动画延迟有问题。

我在做什么，我必须显示前 5 张图片，然后前 5 张图片会淡出，然后在同一个地方淡入接下来的 5 张图片。

@keyframes animationName {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes animationName {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes animationName {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes animationName {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.elementToFadeInAndOut ul {
  display: grid;
  list-style: none;
  grid-template-columns: auto auto auto auto auto;
  grid-gap: 10px;
  padding-left: 0;
  justify-content: center;
  align-items: center;
}

.elementToFadeInAndOut ul li {
  -webkit-animation: animationName 5s infinite;
  -moz-animation: animationName 5s infinite;
  -o-animation: animationName 5s infinite;
  animation: animationName 5s infinite;
  width: 250px;
}

li:nth-child(6),
li:nth-child(7),
li:nth-child(8),
li:nth-child(9),
li:nth-child(10) {
  animation-delay: -4s !important;
}

li:nth-child(11),
li:nth-child(12),
li:nth-child(13),
li:nth-child(14),
li:nth-child(15) {
  animation-delay: -1s !important;
}

img {
  width: 100%;
}

<div class="elementToFadeInAndOut">
  <ul>
    <li><img src="//placehold.it/450x280?text=Image 1" /></li>
    <li><img src="//placehold.it/450x280?text=Image 2" /></li>
    <li><img src="//placehold.it/450x280?text=Image 3" /></li>
    <li><img src="//placehold.it/450x280?text=Image 4" /></li>
    <li><img src="//placehold.it/450x280?text=Image 5" /></li>
    <li><img src="//placehold.it/450x280?text=Image 6" /></li>
    <li><img src="//placehold.it/450x280?text=Image 7" /></li>
    <li><img src="//placehold.it/450x280?text=Image 8" /></li>
    <li><img src="//placehold.it/450x280?text=Image 9" /></li>
    <li><img src="//placehold.it/450x280?text=Image 10" /></li>
    <li><img src="//placehold.it/450x280?text=Image 11" /></li>
    <li><img src="//placehold.it/450x280?text=Image 12" /></li>
    <li><img src="//placehold.it/450x280?text=Image 13" /></li>
    <li><img src="//placehold.it/450x280?text=Image 14" /></li>
    <li><img src="//placehold.it/450x280?text=Image 15" /></li>

  </ul>
</div>

【问题讨论】：

标签： html css animation keyframe

【解决方案1】：

将position: relative; 添加到.elementToFadeInAndOut ul li 并将position: absolute; 添加到img 并删除您的grid-gap: 10px; 见这里：

@keyframes animationName {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
    }

@-o-keyframes animationName {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
    }

@-moz-keyframes animationName {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
    }

@-webkit-keyframes animationName {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
    }

.elementToFadeInAndOut ul {
  display: grid;
  list-style: none;
  grid-template-columns: auto auto auto auto auto;
  padding-left: 0;
  justify-content: center;
  align-items: center;
}

.elementToFadeInAndOut ul li {
  position: relative;
  -webkit-animation: animationName 6s infinite;
  -moz-animation: animationName 6s infinite;
  -o-animation: animationName 6s infinite;
  animation: animationName 6s infinite;
  width: 250px;
  opacity: 0;
}


li:nth-child(6),
li:nth-child(7),
li:nth-child(8),
li:nth-child(9),
li:nth-child(10) {
  animation-delay: -4s !important;
}

li:nth-child(11),
li:nth-child(12),
li:nth-child(13),
li:nth-child(14),
li:nth-child(15) {
  animation-delay: -2s !important;
}


img {
  width: 100%;
  position: absolute;
}

<div class="elementToFadeInAndOut">
  <ul>
    <li><img src="//placehold.it/450x280?text=Image 1" /></li>
    <li><img src="//placehold.it/450x280?text=Image 2" /></li>
    <li><img src="//placehold.it/450x280?text=Image 3" /></li>
    <li><img src="//placehold.it/450x280?text=Image 4" /></li>
    <li><img src="//placehold.it/450x280?text=Image 5" /></li>
    <li><img src="//placehold.it/450x280?text=Image 6" /></li>
    <li><img src="//placehold.it/450x280?text=Image 7" /></li>
    <li><img src="//placehold.it/450x280?text=Image 8" /></li>
    <li><img src="//placehold.it/450x280?text=Image 9" /></li>
    <li><img src="//placehold.it/450x280?text=Image 10" /></li>
    <li><img src="//placehold.it/450x280?text=Image 11" /></li>
    <li><img src="//placehold.it/450x280?text=Image 12" /></li>
    <li><img src="//placehold.it/450x280?text=Image 13" /></li>
    <li><img src="//placehold.it/450x280?text=Image 14" /></li>
    <li><img src="//placehold.it/450x280?text=Image 15" /></li>

  </ul>
</div>

【讨论】：

感谢您的回复，我检查了您的sn-p，我认为，有问题。我的意思是一旦显示了第三组图像（11-15）然后接下来我没有得到第一组（1-5）。它直接显示第二组图像（6-10）
@user9437856 好的，我明白了。我更新了我的答案，请看一下。
或者对不起，忽略它。那是我修改它留下的代码。我会在答案中修复它。
是的，它现在运行良好。感谢您的帮助。