텍스트 요소를 하나씩 페이드 인하는 방법

질문

Marie Forleo의 홈페이지 효과를 css만으로 달성하려고합니다. 그러나 내 모든 요소는 동시에 사라집니다. 어떻게 하나씩 페이드 할 수 있습니까?

내가 원하는 것은 다음과 같습니다. 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; }
}

도와 주셔서 감사합니다!

답변1

animation-delay 를 사용하여 애니메이션을 지연시킬 수 있습니다. 여기에 필요한 것을 볼 수있는 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>

Expand snippet

답변2

페이드 인 할 항목의 수를 알고있는 경우 각 항목에 엇갈린 animation-delay속성을 설정할 수 있습니다.

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

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

답변3

jQuery 솔루션을 찾고 있는지 확실하지 않지만 (css를 언급했지만 jquery에도 태그를 지정했습니다) 이것도 작동합니다.

하나의 선택자를 사용하고 페이드 인을 호출 한 다음 콜백에서 다른 선택자로 fadeIn을 호출 할 수 있습니다. 그런데 페이드 인 ( "느림", "빠름")에 대한 사전 설정이 작동하지 않으면 밀리 초 단위로 숫자를 지정할 수 있습니다.

  $( ".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