CSS затухает в картинке один за другим

Question

Я хочу показать 3-4 изображения один за другим. Сначала я пытаюсь скрыть фотографии. Когда я прокручу куда-нибудь, он будет исчезать на снимках один за другим. Но, вопрос в том, что вторая картина не скроется сначала, но она задержится, чтобы исчезнуть через 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 элемента устанавливается на 100% в течение этой задержки 500 мс. Добавление 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