如何用不同的延迟来瞄准相同的动画

Question

我有两个div，每个div包含一个单词。每个单词中的每个字母都在一个span标签中，像这样:

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

在我的css文件中，我创建了一个淡出的动画，如下所示:

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

，然后添加延迟以使字母按顺序褪色，如下所示:

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

好的，这是有效的，但是两个单词同时开始淡出。我想要的是第二个单词的第一个字母在第一个单词的最后一个字母之后逐渐消失。我是开发新手，但我猜一定有比制作新动画更好的方法。

是否有一种方法可以为相同的动画添加不同的延迟，并针对不同的类或id ?感谢您的宝贵时间。

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