束缚CSS动画不考虑延迟

Question

我创建了两个动画，fadeIn和fadeOut。我希望一组图像逐渐淡出，然后让后面的图像逐渐淡入。但是，我希望此图像无限重复，因此一个图像总是随着其他图像淡入而逐渐淡出。

.top-grid-container > div > picture {
    -webkit-animation-duration: 1s, 1s;
    animation-duration: 1s, 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite, infinite;
    animation-iteration-count: infinite, infinite;
    -webkit-animation-name: fadeOut, fadeIn;
    animation-name: fadeOut, fadeIn;
    -webkit-animation-delay: 4s, 8s;
    animation-delay: 4s, 8s;
    /* animation-timing-function: ease-in, ease-out; */
    width: 100%;
}

.top-grid-container > div > picture:nth-of-type(2) {
    -webkit-animation-name: fadeIn, fadeOut;
    animation-name: fadeIn, fadeOut;
    -webkit-animation-delay: 4s, 8s;
    animation-delay: 4s, 8s;
}

@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}
@keyframes fadeIn{0%{opacity:0}to{opacity:1}}

@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}
@keyframes fadeOut{0%{opacity:1}to{opacity:0}}

<div class="top-grid-container">
  <div class="top-Adrian-Mole">
    <picture>
      <source srcset="https://loremflickr.com/320/240/dog 1x, https://loremflickr.com/640/480/dog 2x, https://loremflickr.com/1280/480/dog 3x">
      <img src="https://loremflickr.com/320/240/dog" alt="Adrian Mole">
    </picture>
    <picture>
      <source srcset="https://loremflickr.com/320/240/london 1x, https://loremflickr.com/640/480/london 2x, https://loremflickr.com/1280/480/london 3x">
      <img src="https://loremflickr.com/320/240/london" alt="Adrian Mole">
    </picture>          
  </div>
</div>

最初，动画开始正常，但是在第一次迭代之后，不再考虑延迟，并且从该点开始立即进行重复。

好吧，我现在发现延迟在迭代中不被考虑，而仅在第一次调用时被考虑。因此，我尝试通过使用以下代码来“伪造”它。

/* Animation */
.top-grid-container > div > picture {
    -webkit-animation-duration: 8s, 8s;
    animation-duration: 8s, 8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite, infinite;
    animation-iteration-count: infinite, infinite;
    -webkit-animation-name: fadeOut, fadeIn;
    animation-name: fadeOut, fadeIn;
    -webkit-animation-delay: 0, 0;
    animation-delay: 0, 0;
    /* animation-timing-function: ease-in, ease-out; */
    width: 100%;
}

.top-grid-container > div > picture:nth-of-type(2) {
    -webkit-animation-name: fadeIn, fadeOut;
    animation-name: fadeIn, fadeOut;
    -webkit-animation-delay: 0, 0;
    animation-delay: 0, 0;
    -webkit-animation-duration: 4s, 4s;
    animation-duration: 4s, 4s;
}


@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }
    25% {
        opacity: 1
    }
    50% {
        opacity: 1
    }
    75% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0
    }
    25% {
        opacity: 1
    }
    50% {
        opacity: 1
    }
    75% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1
    }
    25% {
        opacity: 0
    }
    50% {
        opacity: 0
    }
    75% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}
@keyframes fadeOut {
    0% {
        opacity: 1
    }
    25% {
        opacity: 0
    }
    50% {
        opacity: 0
    }
    75% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

<div class="top-grid-container">
  <div class="top-Adrian-Mole">
    <picture>
      <source srcset="https://loremflickr.com/320/240/dog 1x, https://loremflickr.com/640/480/dog 2x, https://loremflickr.com/1280/480/dog 3x">
      <img src="https://loremflickr.com/320/240/dog" alt="Adrian Mole">
    </picture>
    <picture>
      <source srcset="https://loremflickr.com/320/240/london 1x, https://loremflickr.com/640/480/london 2x, https://loremflickr.com/1280/480/london 3x">
      <img src="https://loremflickr.com/320/240/london" alt="Adrian Mole">
    </picture>          
  </div>
</div>

但是在这种情况下，一幅图像在与另一幅图像不同的时间淡入和淡出。当它们彼此重叠时，这根本无法很好地同步。对我来说，代码看上去正好相反，但是在现实生活中，动画完全不同。

Answer 1

animation-delay属性表示延迟动画开始之前，而不是延迟动画的每次迭代之间。

为了实现所需的效果，您可以使用单个动画对图像进行淡入和淡出，并在第二个图像上延迟动画。

.top-grid-container > div > picture {
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite, infinite;
    animation-iteration-count: infinite, infinite;
    -webkit-animation-name: fadeInAndOut;
    animation-name: fadeInAndOut;
    -webkit-animation-delay: 0;
    animation-delay: 0;
    /* animation-timing-function: ease-in, ease-out; */
    width: 100%;
}

.top-grid-container > div > picture:nth-of-type(2) {
    -webkit-animation-name: fadeInAndOut;
    animation-name: fadeInAndOut;
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
}

@-webkit-keyframes fadeInAndOut{0%{opacity:0} 40%{opacity:0} 50% {opacity:1} 90% {opacity:1} 100%{opacity:0}}
@keyframes fadeInAndOut{0%{opacity:0} 40%{opacity:0} 50% {opacity:1} 90% {opacity:1} 100%{opacity:0}}

<div class="top-grid-container">
  <div class="top-Adrian-Mole">
    <picture>
      <source srcset="https://loremflickr.com/320/240/dog 1x, https://loremflickr.com/640/480/dog 2x, https://loremflickr.com/1280/480/dog 3x">
      <img src="https://loremflickr.com/320/240/dog" alt="Adrian Mole">
    </picture>
    <picture>
      <source srcset="https://loremflickr.com/320/240/london 1x, https://loremflickr.com/640/480/london 2x, https://loremflickr.com/1280/480/london 3x">
      <img src="https://loremflickr.com/320/240/london" alt="Adrian Mole">
    </picture>          
  </div>
</div>