how to multible div fadeout fadein loop animation - html

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>