javascript - CSS 动画播放状态问题 : Animation jumps back to initial frame when resumed?

Question

我得到了类似下面的东西，这是一个在两个图像之间交叉淡入淡出的 CSS 动画:

HTML

<div id="bg">
    <img src="bg_01.jpg">
    <img src="bg_02.jpg">
</div>

CSS

body {
    background: black;
    overflow-y: hidden;
}
#bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
img {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
}
img:last-child {
    -webkit-animation: test 30s infinite alternate;
}
@-webkit-keyframes test {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

还有一个像这样的 JavaScript 片段可以周期性地打开和关闭动画:

JavaScript

var state = 'running';

setInterval(function() {
    $('img:last-child').css({
        '-webkit-animation-play-state': state
    });

    state === 'running' ? state = 'paused' : state = 'running';
}, 1000);

问题是，当动画恢复时(“暂停”->“运行”)可能会出现一些显示故障，并且这种情况取决于您运行页面所针对的设备类型.

如果您在某些最先进的机器上运行该页面，事情看起来会很顺利；然而，如果您切换到另一个浏览器选项卡，然后切换回来，您可能会看到您的动画非常明显地从动画中间跳回到第一帧(即 img:last -child 的不透明度突然回到 1) 并重新开始。

另一方面，如果您在较弱的设备上运行，您可以在不切换浏览器选项卡的情况下看到故障:几乎每次动画恢复时，img:last- 都会有一个闪烁的时刻child 的不透明度被短暂设置为 1 并在视觉上“出现”，然后动画可以从其最后的正确状态恢复并继续。

这仅仅是一个 WebKit 错误，我无法避免，还是有一些巧妙的方法来调整我的代码，以便可以处理初始帧的这种恼人的闪烁？

Answer 1

在 java 脚本中更改条件值。不要使用播放状态。仅在超时 1000s 时使用 pasued 状态...