CSS Animationsschleife ein- und ausblenden 1-2-3-1-2-3-1-2

Question

Ich habe einen Textübergang mit Keyframes, habe 3 Überschriften, die in & nacheinander verschwinden. Es funktioniert aber BUT ich möchte es noch einmal ONE sichern, wenn alle drei done Keyframes

es sollte unendlich arbeiten, nachdem alle Kind Abschluss auf

Animationssequenz

1-2-3-1-2 .... so weiter

CSS:

h2 { 
    position: absolute; 

    opacity: 0; 
    -webkit-animation: fadeOut 3s ease-out forwards; 
    animation: fadeOut 3s ease-out forwards; 
} 

@-webkit-keyframes fadeOut { 
    0% { opacity: 0; } 
    50% { opacity: 1; } 
    100% { opacity: 0; } 
} 
@keyframes fadeOut { 
    0% { opacity: 0; } 
    50% { opacity: 1; } 
    100% { opacity: 0; } 
} 

h2:nth-child(1) {animation-delay: 0s;} 
h2:nth-child(2) {animation-delay: 3s;} 
h2:nth-child(3) {animation-delay: 6s;} 

Hier HTML:

<h2>Hello Heading 1</h2> 
<h2>Heading 2</h2> 
<h2>Heading 3</h2> 

JSFiddle: https://jsfiddle.net/Lq4w007u/

Answer 1

Verwenden Sie diesen Code

setInterval(function(){ 
    var x = 0; 
    for(var i=1; i<=3; i++){ 
     $("h2:nth-child(i)").css("animation-delay", "x.'s'"); 

     x = x+3; 
    } 

$("h2").css({ 
"animation": "fadeOut", 
"animation-duration": "3s", 
"animation-timing-function": "ease-out" 
}) 

}, 12000);