CSS Animation -play-state问题:动画恢复时跳转回初始帧

CSS animation-play-state issue: Animation jumps back to initial frame when resumed?

本文关键字：恢复 -play-state Animation 问题 动画 CSS      更新时间：2023-09-26

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

<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);

问题是，当动画恢复('paused' -> 'running')时，有可能出现一些显示故障，并且几率取决于您运行页面的设备类型。

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

另一方面，如果你运行在一个弱设备上，你可以看到故障不切换浏览器选项卡:几乎每次动画恢复时，会有一个闪烁的时刻，当 img:last-child的不透明度被短暂地设置为1和视觉上"出现"，在动画可以从最后一个适当的状态捡起并继续。

这仅仅是一个WebKit的bug，我不能做什么来避免，或者有一些棘手的方法来调整我的代码，使这个恼人的闪烁的初始帧可以处理?

在java脚本中修改条件值。不要使用播放状态。

仅在超时1000秒时使用已超时状态。
相关文章：