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元素的不透明度爲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