CSS 一张一张淡入画面

Question

我想一张一张展示3-4张图片。我试着先隐藏图片。当我滚动到某个地方时，它会一张一张地淡出图片。但是，问题是第二张图片一开始不会隐藏，而是延迟1s后淡入。 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 class 似乎可以解决该问题，但该元素在动画完成后隐藏。

你可以做的是在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

CSS 一张一张淡入画面

The CSS fade in picture one by one

javascript

css

fade