The CSS fade in picture one by one

Question

I want to show 3-4 picture one by one. I try to hide the pictures first. When i scroll to somewhere, it will fade in the pictures one by one. But, the question is the second picture will not hide at first, but it will delay to fade in after 1s. What's wrong with the css animation-delay?

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

I think the problem is that the #circle1 element's opacity is set to 100% during that 500 milliseconds delay. Adding opacity: 0% to the circle1_display class seems to fix that but the element is hidden after the animation finishes.

What you can do is to add the delay in JavaScript, for example:

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