Jquery Loop Animation fadeIn

Question

私は3つの画像を読み込もうとしていますが、それぞれアニメーションが遅れています。私が望むのは、それらをそれぞれフェードインしてそれぞれの遅延を隠すことです。再度フェードインしてから、繰り返してください。 アニメーションフロー例： 1.フェードインイメージ1ディレイ= 0 /イメージディレイ= 0.5s/image3ディレイ= 1/s 2. 1.5sで3つのイメージをすべて非表示にします 3. FadeInを2sで繰り返す ここでは、私はsetIntervalでクラスの追加と削除を行っています。

$(".tri1").inViewport(function(px) { 
 
    if (px > 0) { 
 
     fadeAdd(); 
 

 
     setInterval(function() { 
 
     fadeAdd(); 
 
     }, 5500); 
 

 
     setInterval(function() { 
 
     fadeRemove(); 
 
     $(".tri1").css('opacity', '0'); 
 
     $(".tri2").css('opacity', '0'); 
 
     $(".tri3").css('opacity', '0'); 
 

 
     }, 5400); 
 
    } 
 
    }); 
 

 
    function fadeAdd() { 
 
    $(".tri1").addClass("fadeIn"); 
 
    $(".tri2").addClass("fadeIn"); 
 
    $(".tri3").addClass("fadeIn"); 
 
    } 
 

 
    function fadeRemove() { 
 
    $(".tri1").removeClass("fadeIn"); 
 
    $(".tri2").removeClass("fadeIn"); 
 
    $(".tri3").removeClass("fadeIn"); 
 
    }

.tri2{ 
 
    animation-delay: 0.5s; 
 
} 
 

 
.tri3{ 
 
    animation-delay: 1s; 
 
}

<div class="pointer"> 
 
      <img class="tri1 animated" src="res/img/sec4/tri1.png" alt="" /> 
 
      <img class="tri2 animated" src="res/img/sec4/tri2.png" alt="" /> 
 
      <img class="tri3 animated" src="res/img/sec4/tri3.png" alt="" /> 
 

 
</div>

Answer 1

：

#img-container img{ 
 
    border: 5px solid orange; 
 
    height: 100px; 
 
    width: 100px; 
 
    animation-duration: 4s; 
 
    animation-delay: 0s; 
 
    animation-iteration-count: infinite; 
 
} 
 
#img-container img#pic1{ 
 
    animation-name: fadeIn1; 
 
} 
 
#img-container img#pic2{ 
 
    animation-name: fadeIn2; 
 
} 
 
#img-container img#pic3{ 
 
    animation-name: fadeIn3; 
 
} 
 

 
@keyframes fadeIn1{ 
 
    0%{ opacity: 0;} 
 
    12.5%{ opacity: 1;} 
 
    90%{ opacity: 1; } 
 
    100%{ opacity: 0; } 
 
} 
 

 
@keyframes fadeIn2{ 
 
    0%{ opacity: 0;} 
 
    12.5%{ opacity: 0;} 
 
    25%{ opacity: 1;} 
 
    90%{ opacity: 1; } 
 
    100%{ opacity: 0; } 
 
} 
 

 
@keyframes fadeIn3{ 
 
    0%{ opacity: 0;} 
 
    25%{ opacity: 0;} 
 
    37.5%{ opacity: 1;} 
 
    90%{ opacity: 1; } 
 
    100%{ opacity: 0; } 
 
} 
 

 

 

 

 
.as-console-wrapper{display: none!important;}

<div id="img-container"> 
 
    <img id="pic1" src="http://lorempixel.com/100/100/people" alt="pic1" /> 
 
    <img id="pic2" src="http://lorempixel.com/100/100/nature" alt="pic2" /> 
 
    <img id="pic3" src="http://lorempixel.com/100/100/fashion" alt="pic3" /> 
 
</div>

Answer 2

私はあなたがいないサードパーティの要件に簡単なJavaScriptコードを実装することをお勧めします。関数を作成し、それをfadeOutのコールバックとして使用すると、要素がフェードアウトしたときに関数が呼び出されます。

あなたはこのような何か試してみてください：

1）Javascriptコードを

var $elem = $('#main .trip'), l = $elem.length, i = 0; 

function go() { 
    $elem.eq(i % l).fadeIn(700, function() { 
     $elem.eq(i % l).fadeOut(700, go); 
     i++; 
    }) 
} 

go(); 

2）HTMLコード

<div id="main"> 
    <div id="1" class="trip">Item1</div> 
    <div id="2" class="trip">Item2</div> 
    <div id="3" class="trip">Item3</div> 
</div> 

3）CSSコード

.trip { display: none} 

デモ：あなたが唯一のCSSアニメーションを使用してそれを行うことができます