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/

如何逐个淡入文本元素

3 个答案: