如何使用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