CSSが1枚ずつフェードインします

Question

1枚ずつ3枚ずつ表示したいです。私は最初に写真を隠そうとします。私がどこかにスクロールすると、画像が1つずつ消えてしまいます。しかし、問題は、最初に隠れていない2枚目の写真ですが、1秒後にはフェードインするのが遅れます。 CSSのアニメーション遅延の何が問題なのですか？

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

私はこの問題は#circle1要素の不透明度は、その500ミリ秒の遅延中に100％に設定されていることだと思います。 opacity: 0%をcircle1_displayクラスに追加すると、それが修正されたように見えますが、アニメーションが終了するとその要素は非表示になります。あなたは何ができるか

は、たとえば、JavaScriptで遅延を追加することです：

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