Me atasqué en las animaciones de fotogramas clave.

Tengo un css de animación de fadein fadeout. El código funciona bien con 3 div pero cuando agrego + 1 div y animaciones, el bucle css se rompe. Quiero que trabajen sincrónicamente, pero ¿cómo?

Hay código:

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