comment cibler la même animation avec différents délais

Question

J'ai deux divs qui contiennent chacun un mot. Et chaque lettre dans chacun de ces mots est dans une balise span comme ceci:

<div class="fade-in"> 
    <span>h</span><span>e</span><span>l</span><span>l</span><span>o</span> 
</div> 

<div class="fade-in"> 
    <span>w</span><span>o</span><span>r</span><span>l</span><span>d</span> 
</div> 

Dans mon fichier css, j'ai créé une animation qui se fond dans les mots comme ceci:

.fade-in span{ 
    opacity: 0; 
    animation-name: fadeInOpacity; 
    animation-iteration-count: 1; 
    animation-timing-function: ease-in; 
    animation-duration: 2s; 
    animation-fill-mode: forwards; 
} 

@keyframes fadeInOpacity { 
    0% {opacity: 0;} 
    100% {opacity: 1;} 
} 

puis ajouté un délai pour obtenir les lettres fading dans l'ordre, comme ceci:

.fade-in span:nth-child(1) { animation-delay: 400ms; } 
.fade-in span:nth-child(2) { animation-delay: 500ms; } 
.fade-in span:nth-child(3) { animation-delay: 600ms; } 
.fade-in span:nth-child(4) { animation-delay: 700ms; } 
.fade-in span:nth-child(5) { animation-delay: 800ms; } 

Ok, donc cela fonctionne, mais les deux mots commencent la décoloration en même temps. Ce que je voudrais, c'est que la première lettre du second mot commence à disparaître après la dernière lettre du premier mot. Je suis très novice en matière de développement, mais je suppose qu'il doit y avoir un meilleur moyen que de créer de nouvelles animations.

Existe-t-il un moyen d'ajouter différents délais à la même animation et de cibler des classes ou des ID différents? Merci pour votre temps.

Answer 1

HTML:

<div class="fade-in" id="hello"> 
    <span>h</span><span>e</span><span>l</span><span>l</span><span>o</span> 
    </div> 

    <div class="fade-in" id="world"> 
    <span>w</span><span>o</span><span>r</span><span>l</span><span>d</span> 
    </div>  

CSS:

#hello .fade-in span:nth-child(1) { animation-delay: 300ms; } 
    #hello .fade-in span:nth-child(2) { animation-delay: 400ms; } 
    #hello .fade-in span:nth-child(3) { animation-delay: 500ms; } 
    #hello .fade-in span:nth-child(4) { animation-delay: 600ms; } 
    #hello .fade-in span:nth-child(5) { animation-delay: 700ms; } 


    #world .fade-in span:nth-child(1) { animation-delay: 900ms; } 
    #world .fade-in span:nth-child(2) { animation-delay: 1000ms; } 
    #world .fade-in span:nth-child(3) { animation-delay: 1100ms; } 
    #world .fade-in span:nth-child(4) { animation-delay: 1200ms; } 
    #world .fade-in span:nth-child(5) { animation-delay: 1300ms; }