如何逐个淡入文本元素

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 属性。

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

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

Answer 2

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

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

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

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

Answer 3

您可以使用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>