如何多重 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

您将 class anm2 定义为最后三个 div。我认为这可能是动画崩溃的原因以及 css-rules.

中的一些语法错误

这里是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>

如何多重 div 淡出淡入循环动画

how to multible div fadeout fadein loop animation

html

css

animation

keyframe