CSS过渡交叉淡入淡出多个图像无法正常工作

Question

我有四个图像，我想用CSS单独淡入淡出。 我已经研究了实现此目的的代码，它基于 CSS = 真棒

我已经将我所做的添加到JS小提琴中

.CSS

.upperlogo {
position:relative;
height: 100px;
width:1200px;
margin: 0 auto;
background-color:transparent;
}
@-webkit-keyframes upperlogoFadeInOut {
0% {
opacity:1;
}
17% {
opacity:0;
}
34% {
opacity:0;
}
51% {
opacity:0;
}
68% {
opacity:0;
}
85% {
opacity:0;
}
100% {
opacity:1;
}
}

@-moz-keyframes upperlogoFadeInOut {
0% {
opacity:1;
}
17% {
opacity:0;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
@-o-keyframes upperlogoFadeInOut {
0% {
opacity:1;
}
17% {
opacity:0;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
@keyframes upperlogoFadeInOut {
0% {
opacity:1;
}
17% {
opacity:0;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}

.upperlogo img {
position:absolute;
left:0;
}
.upperlogo img {
-webkit-animation-name: upperlogoFadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 16s;
-moz-animation-name: upperlogoFadeInOut;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 16s;
-o-animation-name: upperlogoFadeInOut;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 16s;
animation-name: upperlogoFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 16s;
}
.upperlogo img:nth-of-type(1) {
-webkit-animation-delay: 16s;
-moz-animation-delay: 16s;
-o-animation-delay: 16s;
animation-delay: 16s;
}
.upperlogo img:nth-of-type(2)) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
animation-delay: 12s;
}
.upperlogo img:nth-of-type(3) {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-o-animation-delay: 8s;
animation-delay: 8s;
}
.upperlogo img:nth-of-type(4) {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}

几个图像最终彼此之间变得泥泞，我也得到了几秒钟的空白屏幕。 我无法理解这一点。 我希望实现的是始终具有可见的图像，并且它们彼此之间平滑过渡。

Answer 1

一个简单的解决方案是使用 javascript setInterval 方法来重复关键帧动画。

但是，要使用纯 CSS 执行此操作，您可以更改元素的背景并使用关键帧来确定图像之间每个淡入/淡出的长度。为清楚起见，删除了供应商前缀：

.img-loader {
display: none; 
background: url("https://globaleyes.blob.core.windows.net/website/ENGLISH-flag-graphic.png"), url("https://globaleyes.blob.core.windows.net/website/SPAIN-flag-graphic.png"), url("https://globaleyes.blob.core.windows.net/website/PORTUGUESE-flag-graphic.png"), url("https://globaleyes.blob.core.windows.net/website/BRAZIL-flag-graphic.png");
}
.upperlogo {
width: 100%;
height: 50px;
margin-top: 40px;
background: url('https://globaleyes.blob.core.windows.net/website/ENGLISH-flag-graphic.png') center center no-repeat;
background-size: contain;
}
@keyframes upperlogoFadeInOut1 {
0% {
background: url('https://globaleyes.blob.core.windows.net/website/ENGLISH-flag-graphic.png') center center no-repeat;
background-size: contain;
}
20% {
background: url('https://globaleyes.blob.core.windows.net/website/ENGLISH-flag-graphic.png') center center no-repeat;
background-size: contain;
}
25% {
background: url('https://globaleyes.blob.core.windows.net/website/SPAIN-flag-graphic.png') center center no-repeat;
background-size: contain;
}
45% {
background: url('https://globaleyes.blob.core.windows.net/website/SPAIN-flag-graphic.png') center center no-repeat;
background-size: contain;
}
50% {
background: url('https://globaleyes.blob.core.windows.net/website/PORTUGUESE-flag-graphic.png') center center no-repeat;
background-size: contain;
}
70% {
background: url('https://globaleyes.blob.core.windows.net/website/PORTUGUESE-flag-graphic.png') center center no-repeat;
background-size: contain;
}
75% {
background: url('https://globaleyes.blob.core.windows.net/website/BRAZIL-flag-graphic.png') center center no-repeat;
background-size: contain;
}
95% {
background: url('https://globaleyes.blob.core.windows.net/website/ENGLISH-flag-graphic.png') center center no-repeat;
background-size: contain;
}
100% {
background: url('https://globaleyes.blob.core.windows.net/website/ENGLISH-flag-graphic.png') center center no-repeat;
background-size: contain;
}
}
.upperlogo {
animation: upperlogoFadeInOut1 20s ease-in-out infinite;
}

<div class="img-loader"></div>
<div class="upperlogo"></div>

希望这有帮助！