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!

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

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

回答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/

来源：https://stackoverflow.com/questions/48349767/how-to-fade-in-text-elements-one-by-one

标签

html

css

animation