comment multi-diviser fadeout fadein animation de boucle

Question

Je suis coincé dans les animations d'images clés.

J'ai une fadein fadeout animation css. Le code fonctionne bien avec 3 div mais quand j'ajoute + 1 div et animations, la boucle css est cassée. Je veux qu'ils travaillent de manière synchrone mais comment?

Il y a 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> 
 
       
 

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

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

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

Answer 1

Vous avez défini la classe anm2 pour durer trois années div. Je pense que cela pourrait être une raison de crash d'animation avec quelques erreurs de grammaire dans les règles CSS.

Voici une solution d'animation. Animation utilisé avec une image clé en raison de différentes animations retard pour différentes 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> 
 
\t <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>