How to fade in text elements one by one - html

Question

I'm trying to achieve Marie Forleo's homepage effect just with css. But all my elements fades at the same time. How can i fade it one by one?
Here's what i want to accomplish: https://www.marieforleo.com/ (Fade in effect of banner)
Here's my code:
test h1 {
-webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 5s; /* Firefox < 16 */
-ms-animation: fadein 5s; /* Internet Explorer */
-o-animation: fadein 5s; /* Opera < 12.1 */
animation: fadein 5s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
#-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
Thank you guys for your help!

Answer 1

You can use animation-delay to delay animations. Here is a JSFiddle where you can see what you need.
#keyframes fadeIn {
from {opacity: 0}
to {opacity: 1}
}
.fadeInAnimated {
opacity: 0;
animation: fadeIn 2s forwards; /* forwards (animation-fill-mode) retains the style from the last keyframe when the animation ends */
}
#second {
animation-delay: 2s;
}
#third {
animation-delay: 4s;
}
<ul>
<li id="first" class="fadeInAnimated">This first</li>
<li id="second" class="fadeInAnimated">Then this</li>
<li id="third" class="fadeInAnimated">And lastly this</li>
</ul>

Answer 2

If you know how many items you're going to fade in, you could set a staggered animation-delay property on each one.
.item_01 {
animation-delay: 1s;
}
.item_02 {
animation-delay: 2s;
}
https://www.w3schools.com/cssref/css3_pr_animation-delay.asp

Answer 3

Not sure if you're looking for a jQuery solution (you mention css, but you've also tagged jquery) but this will work as well.
You can use 1 selector and call fade in, then in the callback call fadeIn with another selector. By the way, if the pre-sets for fade in ("slow", "fast") don't work for you you can specify numbers in milliseconds.
$( ".item_01" ).fadeIn( "slow", function() {
$(".item_02").fadeIn("slow");
});
http://api.jquery.com/fadein/