CODEWITHSUNDEEP
htmlcssanimation
karensantana
karensantana

Reputation: 1639

How to fade in text elements one by one

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!

Upvotes: 4

Views: 7665

Answers (3)

Titulum
Titulum

Reputation: 11496

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>

Upvotes: 4

Jonathan Chaplin
Jonathan Chaplin

Reputation: 2482

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/

Upvotes: 1

frodo2975
frodo2975

Reputation: 11793

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

Upvotes: 1

Related Questions