如何逐个淡入文本元素

Question

我试图用css 来实现Marie Forleo的主页效果。但是我的所有元素同时消失了。我怎么能一个一个地褪色呢？

这就是我想要完成的事：https://www.marieforleo.com/（淡化效果）

这是我的代码：

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

谢谢你们的帮助！

Answer 1

您可以使用animation-delay来延迟动画。 Here is a JSFiddle你可以看到你需要的东西。

@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

如果您知道要淡入的项目数量，则可以在每个项目上设置交错的animation-delay属性。

.item_01 {
    animation-delay: 1s;
}
.item_02 {
    animation-delay: 2s;
}

https://www.w3schools.com/cssref/css3_pr_animation-delay.asp

Answer 3

不确定你是否正在寻找一个jQuery解决方案（你提到css，但你也标记了jquery）但这也可以。

您可以使用1个选择器并调用淡入，然后在回调调用fadeIn中使用另一个选择器。顺便说一下，如果淡入的预设（“慢”，“快”）对你不起作用，你可以用毫秒来指定数字。

  $( ".item_01" ).fadeIn( "slow", function() {
     $(".item_02").fadeIn("slow");
  });

http://api.jquery.com/fadein/