html - CSS Transitions 交叉淡入淡出多个图像无法正常工作-6ren

html - CSS Transitions 交叉淡入淡出多个图像无法正常工作

转载作者：行者123 更新时间：2023-11-28 15:29:43

<分区>

我有四个图像，我想用 CSS Only 交叉淡入淡出。我研究了实现此目的的代码，它基于 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;
}