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