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

我有四个图像，我想交叉淡入与CSS只。我已经研究了实现这一点的代码，它基于

我已将我所做的添加到

CSS

---

有几张图片最终在彼此之间变得浑浊，我也得到了几秒钟的空白屏幕。我无法理解这件事。我希望实现的是始终使图像可见，并且它们在彼此之间平滑过渡。

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

但是，要使用纯CSS实现这一点，您可以更改元素的背景，并使用关键帧确定图像之间每个淡入淡出的长度。为清晰起见，删除了供应商前缀：

.img加载器{
显示：无；
背景：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{
宽度：100%；
高度：50px；
边缘顶端：40px；
背景：url（'https://globaleyes.blob.core.windows.net/website/ENGLISH-flag-graphic.png中-中不重复；
背景尺寸：包含；
}
@关键帧upperlogoFadeInOut1{
0% {
背景：url（'https://globaleyes.blob.core.windows.net/website/ENGLISH-flag-graphic.png中-中不重复；
背景尺寸：包含；
}
20% {
背景：url（'https://globaleyes.blob.core.windows.net/website/ENGLISH-flag-graphic.png中-中不重复；
背景尺寸：包含；
}
25% {
背景：url（'https://globaleyes.blob.core.windows.net/website/SPAIN-flag-graphic.png中-中不重复；
背景尺寸：包含；
}
45% {
背景：url（'https://globaleyes.blob.core.windows.net/website/SPAIN-flag-graphic.png中-中不重复；
背景尺寸：包含；
}
50% {
背景：url（'https://globaleyes.blob.core.windows.net/website/PORTUGUESE-flag-graphic.png中-中不重复；
背景尺寸：包含；
}
70% {
背景：url（'https://globaleyes.blob.core.windows.net/website/PORTUGUESE-flag-graphic.png中-中不重复；
背景尺寸：包含；
}
75% {
背景：url（'https://globaleyes.blob.core.windows.net/website/BRAZIL-flag-graphic.png中-中不重复；
背景尺寸：包含；
}
95% {
背景：url（'https://globaleyes.blob.core.windows.net/website/ENGLISH-flag-graphic.png中-中不重复；
背景尺寸：包含；
}
100% {
背景：url（'https://globaleyes.blob.core.windows.net/website/ENGLISH-flag-graphic.png中-中不重复；
背景尺寸：包含；
}
}
.upperlogo{
动画：upperlogoFadeInOut1 20秒轻松输入输出无限；
}

你想让4张图像无限地参与平滑不透明度转换，还是让3张图像在1张背景静态图像上进行不透明度转换？嗨，阿曼，我不确定这个问题的答案。我不希望透明的白色背景像现在这样出现。我希望始终看到四幅图像中的一幅，它们均匀地循环。如果一个是静态的，我不认为这有什么区别，可能有助于浏览器不喜欢的代码，并将显示它。让我知道，如果复制链接不能解决你的问题，谢谢。没有发现那个。谢谢马克，这是一个复制品，尽管我没有注意到。我现在有它的工作与其他解决方案，但已经+1'你的努力，谢谢。

.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;
}