How to sequence multiple text animations one after one?

Question

I am not able to print multiple text animations in a sequence in html and css..

Answer 1

To sequence multiple text animations one after another in HTML and CSS, you can use the animation-delay property in conjunction with the animation-name property.

Here's an example of how you might do this:

HTML:

<div class="animated-text">
<p class="text1">Text animation 1</p>
<p class="text2">Text animation 2</p>
<p class="text3">Text animation 3</p>
</div>

CSS:

.animated-text p {
animation-duration: 1s;
animation-fill-mode: both;
}

.text1 {
animation-name: example;
animation-delay: 0s;
}

.text2 {
animation-name: example;
animation-delay: 1s;
}

.text3 {
animation-name: example;
animation-delay: 2s;
}

@keyframes example {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

Answer 2

To achieve your first requirement, you need to use the css selector :nth-child(). How to use it: element:nth-child(n) where n represents the index of the child element in its parent.

For the other one you would need to separate your text and the "|" each in a separate <span> to target them individually with a different animation duration (speed).

EDIT:

If you can use JQuery and you're planning on adding more lines over time, I would recommend using DaniP'sanswer, it's way more scalable, without worrying about adding a new css selector for every line. If you want to target a specific line to change something like animation-duration you could just target them individually adding an id and using css.

Answer 3

https://code.sololearn.com/W1IcwHPKd6KK/?ref=app

Answer 4

Sadaam Linux,Destiny Simon Thank you so much for your answers,but I have tried both these (animation-delay and nth-child ) which didn't work..

I will explain the problem is that one text animation has a fade-out effect and the second one has a slide in effect. The text is already there in the window and it does the animation after the previous one is finished.

I will post that code here in this answer and if possible I will post it today as this is in Vs code.
https://code.sololearn.com/W0D6UMy2Ie1C/?ref=app
It is a bit different here..

Answer 5

Thanks Calviղ