wie die gleiche Animation mit verschiedenen Verzögerungen zu zielen

Question

Ich habe zwei Divs, die jeweils ein Wort enthalten. Und jeder Buchstabe in jedem dieser Worte ist in einem span-Tag wie folgt:

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

In meiner CSS-Datei, ich habe eine Animation erstellt, die wie so in den Worten verblasst:

.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;} 
} 

und dann hinzugefügt, um eine Verzögerung, die Buchstaben Verblassen, um, wie so zu erhalten:

.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, so das funktioniert, aber beide Wörter beginnen Fading in zugleich. Ich möchte, dass der erste Buchstabe des zweiten Wortes nach dem letzten Buchstaben des ersten Wortes beginnt. Ich bin sehr neu in der Entwicklung, aber ich vermute, dass es einen besseren Weg geben muss, als neue Animationen zu erstellen.

Gibt es eine Möglichkeit, der gleichen Animation verschiedene Verzögerungen hinzuzufügen und verschiedene Klassen oder IDs anzusprechen? Vielen Dank für Ihre Zeit.

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; }