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

Question

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

我在做什么，我必须显示前 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>

Answer 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>

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

Infinite fade-in fade-out animation on the images

html

css

animation

keyframe