Das CSS fade in Bild eins nach dem anderen

Question

Ich möchte 3-4 Bild eins nach dem anderen zeigen. Ich versuche zuerst die Bilder zu verstecken. Wenn ich irgendwo scrolle, werden die Bilder nacheinander eingeblendet. Aber die Frage ist, dass das zweite Bild sich nicht zuerst verstecken wird, aber es wird sich verzögern, nach 1s einzublenden. Was stimmt nicht mit der CSS-Animation-Verzögerung?

$(window).scroll(function(){ 
 
     var body = $("body").scrollTop(); 
 
     if (body >= 1000) { 
 
      $("#circle").removeClass("circle_hidden").addClass("circle_display"); 
 
      $("#circle1").removeClass("circle_hidden").addClass("circle1_display"); 
 
      var classname= $("#circle").attr("class"); 
 
      console.log(classname); 
 
     } 
 
     });

.circle_hidden{ 
 
     width:50%; 
 
     visibility: hidden; 
 
     } 
 

 
     .circle_display{ 
 
     width:50%; 
 
     animation-name: fadeIn; 
 
     animation-duration: 3s; 
 
     visibility: visible; 
 
     } 
 

 
     .circle1_display{ 
 
     width:50%; 
 
     animation-name: fadeIn; 
 
     animation-duration: 3s; 
 
     animation-delay: 0.5s; 
 
     visibility: visible; 
 

 

 
     } 
 
     @keyframes animation { 
 
     0%{transform: translateY(50%);background-color: red} 
 
     100%{tranform:translateY(70%);background-color: blue} 
 
     } 
 
     @keyframes fadeIn { 
 
     0%{opacity: 0} 
 
     100%{opacity:1} 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 

 

 
    <div id="bg1" style=" height: 2000px; width: 800px;"> 
 
<p>Topic 1</p> 
 
<img id="circle" class="circle_hidden" src="images/top7.jpg" > 
 
<img id="circle1" class="circle_hidden" src="images/top8.jpg" >

Answer 1

ich glaube, das Problem ist, dass die Deckkraft des #circle1 Element auf 100% während dieser 500 Millisekunden Verzögerung eingestellt ist. Das Hinzufügen von opacity: 0% zur Klasse circle1_display scheint das zu beheben, aber das Element ist nach dem Ende der Animation ausgeblendet.

Was Sie tun können, ist die Verzögerung in JavaScript hinzufügen, zum Beispiel:

CSS

.circle1_display{ 
    width:50%; 
    animation-name: fadeIn; 
    animation-duration: 3s; 
} 

JavaScript:

setTimeout(function(){ 
    $("#circle1").removeClass("circle_hidden").addClass("circle1_display"); 
}, 500); 

Here is an example