链接 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>

最初动画开始正常，但在第一次迭代后不再考虑延迟，从那一点开始立即重复。

好的，我现在发现迭代不考虑延迟，而只考虑第一次调用。所以我尝试使用以下代码 "fake it"。

/* 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>

链接 CSS 动画不考虑延迟

Chaining CSS animations doesn't respect delay

css

animation

delay

css-animations