如何以不同的延迟定位相同的动画(how to target the same animation with different delays)

如何以不同的延迟定位相同的动画(how to target the same animation with different delays)

我有两个分别包含一个单词的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？ 谢谢你的时间。

I have two divs that contain a word each. And each letter in each of those words is inside a span tag like so:

<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 my css file, I have created an animation that fades in the words like so:

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

and then added a delay to get the letters fading in order, like so:

.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 this works, but both words start fading in at the same time. What I would like is for the first letter of the second word to start fading in after the last letter of the first word. I am very new to development but I am guessing there has to be a better way than creating new animations.

Is there a way to add different delays to the same animation and target different classes or id's? Thanks for your time.

最满意答案

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

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