how to multible div fadeout fadein loop animation

Question

I stuck in keyframes animations.

I have a fadein fadeout animation css. Code work nice with 3 div but when I add + 1 div and animations, css loop is broken. I want them to work synchronously but how ?

There is code :

@-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

You defined class anm2 to last three div's. I think it could be a reason of animation crash along with some grammar mistakes in css-rules.

Here is a solution of animate. Animation used with one keyframe due to different animation-delay for different 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>