html - 如何多个div淡出淡入循环动画

Question

我陷入了关键帧动画。

我有一个淡入淡出动画 CSS。代码适用于 3 个 div，但是当我添加 + 1 个 div 和动画时，css 循环被破坏了。我希望他们同步工作，但如何？

有代码:

@-webkit-keyframes fadeA {
    0% {
        opacity: 0
    }

    13.2%,19.8% {
        opacity: 1;
        z-index: 5
    }

    100%,33% {
        opacity: 0
    }
}

@-webkit-keyframes fadeB {
    0%,33% {
        opacity: 0
    }

    46.2%,52.8% {
        opacity: 1;
        z-index: 5
    }

    100%,66% {
        opacity: 0
    }
}

@-webkit-keyframes fadeC {
    0%,66% {
        opacity: 0
    }

    79.2%,85.8% {
        opacity: 1;
        z-index: 5
    }

    100% {
        opacity: 0
    }
}

@-webkit-keyframes fadeD {
    0%,66% {
        opacity: 0
    }

    79.2%,85.8% {
        opacity: 1;
        z-index: 5
    }

    100% {
        opacity: 0
    }
}

@-moz-keyframes fadeA {
    0% {
        opacity: 0
    }

    13.2%,19.8% {
        opacity: 1;
        z-index: 5
    }

    100%,33% {
        opacity: 0
    }
}

@-moz-keyframes fadeB {
    0%,33% {
        opacity: 0
    }

    46.2%,52.8% {
        opacity: 1;
        z-index: 5
    }

    100%,66% {
        opacity: 0
    }
}

@-moz-keyframes fadeC {
    0%,66% {
        opacity: 0
    }

    79.2%,85.8% {
        opacity: 1;
        z-index: 5
    }

    100% {
        opacity: 0
    }
}

@-moz-keyframes fadeD {
    0%,66% {
        opacity: 0
    }

    79.2%,85.8% {
        opacity: 1;
        z-index: 5
    }

    100% {
        opacity: 0
    }
}

@keyframes fadeA {
    0% {
        opacity: 0
    }

    13.2%,19.8% {
        opacity: 1;
        z-index: 5
    }

    100%,33% {
        opacity: 0
    }
}

@keyframes fadeB {
    0%,33% {
        opacity: 0
    }

    46.2%,52.8% {
        opacity: 1;
        z-index: 5
    }

    100%,66% {
        opacity: 0
    }
}

@keyframes fadeC {
    0%,66% {
        opacity: 0
    }

    79.2%,85.8% {
        opacity: 1;
        z-index: 5
    }

    100% {
        opacity: 0
    }
}

@keyframes fadeD {
    0%,66% {
        opacity: 0
    }

    79.2%,85.8% {
        opacity: 1;
        z-index: 5
    }

    100% {
        opacity: 0
    }
}




     .anm1{
        width:100%;
        position: absolute;
        top: 3px;
        left: 0;
        opacity: 0;
        -webkit-animation: fadeA ease 15s infinite;
        -moz-animation: fadeA ease 15s infinite;
        animation: fadeA ease 15s infinite
    }

    .anm2 {
        width: 100%;
        position: absolute;
        top: 3px;
        left: 0;
        opacity: 0;
        -webkit-animation: fadeB ease 15s infinite;
        -moz-animation: fadeB ease 15s infinite;
        animation: fadeB ease 15s infinite
    }

    .anm3 {
        width: 100%;
        position: absolute;
        top: 3px;
        left: 0;
        opacity: 0;
        -webkit-animation: fadeC ease 15s infinite;
        -moz-animation: fadeC ease 15s infinite;
        animation: fadeC ease 15s infinite
    }
    .anm4 {
        width: 100%;
        position: absolute;
        top: 3px;
        left: 0;
        opacity: 0;
        -webkit-animation: fadeD ease 15s infinite;
        -moz-animation: fadeD ease 15s infinite;
        animation: fadeD ease 15s infinite
    }

<div>
             

		 	<div class="anm1">FIRST TEXT </div>

		    <div class="anm2">SECOND TEXT</div>  

            <div class="anm2">THIRD TEXT</div> 
            
            <div class="anm2">FOURth TEXT</div> 
		 
		</div>

Answer 1

您将类 anm2 定义为最后三个 div。我认为这可能是动画崩溃的原因以及 css 规则中的一些语法错误。

这里是animate的解决方案。由于不同 div-s 的动画延迟不同，动画使用一个关键帧

@-webkit-keyframes fadeA {
    0% {opacity: 0}
    12.5% { opacity: 1; }
    25% { opacity: 0; }
    100% { opacity: 0 }
}
@keyframes fadeA {
    0% {opacity: 0}
    12.5% { opacity: 1; }
    25% { opacity: 0; }
    100% { opacity: 0 }
}
[class^="anm"] {
  display: inline-block;
        position: absolute;
        top: 3px;
        left: 0;
        opacity: 0;
        -webkit-animation: fadeA ease 12s;
        -moz-animation: fadeA ease 12s ;
        animation: fadeA ease 12s ;
}
.anm1{
        -webkit-animation-delay: 0s;
        animation-delay: 0s;
    }
.anm2 {
        -webkit-animation-delay: 3s;
        animation-delay: 3s;
    }
.anm3 {
        -webkit-animation-delay: 6s;
        animation-delay: 6s;
    }
.anm4 {
        -webkit-animation-delay: 9s;
        animation-delay: 9s;
    }

<div>
	<div class="anm1">FIRST TEXT </div>
    <div class="anm2">SECOND TEXT</div>  
    <div class="anm3">THIRD TEXT</div> 
    <div class="anm4">FOURth TEXT</div> 
</div>