运行 如何同时使用 CSS3 和 jQuery 制作关键帧动画

How do run a keyframe animation with CSS3 concurrently with jQuery

如何在 jQuery fadeIn 的同时进行 CSS3 转换 运行？

我正在尝试让模态弹出窗口淡入，同时叠加层也在页面上淡入。

目前叠加层会在延迟5秒后淡入(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/

除非另有说明，否则效果会自动放在效果队列的末尾。调换顺序，先出现模糊。

为了让它们同时出现，你可以这样做：

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