如何使用CSS3與jQuery同時運行關鍵幀動畫

Question

如何使用jQuery fadeIn同時運行CSS3轉換？

我想讓一個模式彈出窗口淡入淡出，同時在頁面上疊加一個淡入淡出。

目前，疊加延遲5s後延遲（5000）。然而，直到5秒之後關鍵幀動畫纔會啓動？我希望他們都在同一時間開始。

用於疊加的過渡編碼爲這樣：

$(document).ready(function() { 
    $(".modal-newsletter-wrap").delay(5000).fadeIn(1000); 
    window.setTimeout(function(){$(".page-wrap").addClass("blur");}, 5000); 
}); 

和模態彈出編碼爲這樣：

.modal-newsletter { 
    opacity: 0; 
    animation: fx 1s linear 5s 1 forwards; 
} 

如果它們都被設置爲5s/5000那麼爲什麼jQuery的首先播放，然後5秒後關鍵幀動畫開始播放？

全部工作實施例的位置：https://jsfiddle.net/5ho8j78d/6/

Answer 1

的影響被自動放置在效果隊列的末尾，除非另有規定。切換順序，模糊將首先發生。

爲了讓他們同時出現，你可以這樣做：

CSS

.modal-newsletter-wrap { 
    opacity:0; 

jQuery的

$(document).ready(function() { 
    window.setTimeout(function(){ 
     $(".page-wrap").addClass("blur"); 
     $(".modal-newsletter-wrap").animate({ 
      queue: false, 
      opacity: 1 
      },1000); 
    }, 5000); 

}); 

jsFiddle