【发布时间】：2020-03-21 00:24:09
【问题描述】：
我创建了两个动画，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>但在这种情况下，一幅图像在与另一幅不同的时间淡入和淡出。当它们彼此重叠时，这根本不能很好地同步。对我来说，代码看起来正好相反，但在现实生活中，动画是完全不同的。
【问题讨论】：
-
"他们的所作所为应该很明显" 总是明确地说出来以避免任何混淆。特别是如果您的演示 sn-p 显示它没有按预期工作。
-
感谢@Oddrigue，这是一个中肯的评论。松散的语言永远不会有帮助。你帮助我改进了我的问题。
-
没问题，如有疑问，请始终告诉您希望您的代码做什么:)
标签： css animation css-animations delay