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

【问题标题】：How do run a keyframe animation with CSS3 concurrently with jQuery如何使用 CSS3 和 jQuery 同时运行关键帧动画
【发布时间】：2015-03-27 14:53:58
【问题描述】：

如何使 CSS3 过渡与 jQuery fadeIn 同时运行？

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

目前，叠加层会在延迟 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/

【问题讨论】：

标签： jquery css animation css-animations

【解决方案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

【讨论】：