如何一一淡入文本元素 [英] How to fade in text elements one by one

问题描述

我正试图通过CSS来实现Marie Forleo的首页效果.但是我所有的元素都在同一时间消失.我该如何一次褪色?

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?

这就是我要完成的任务: https://www.marieforleo.com/(淡入横幅的效果)

Here's what i want to accomplish: https://www.marieforleo.com/ (Fade in effect of banner)

这是我的代码:

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

谢谢你们的帮助！

推荐答案

您可以使用 animation-delay 来延迟动画.这是一个JSFiddle ，您可以在其中查看所需内容.

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>

这篇关于如何一一淡入文本元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！