CSS过渡以淡化多个图像无法正常工作

Question

我有四张图片，我想用CSS褪色。我已经研究了实现此目的的代码，它基于CSS = Awesome

我已将我所做的工作添加到JS Fiddle

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>

希望这有帮助！