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

问题是，动画恢复时会出现一些显示故障（'暂停' - ＆gt;'正在运行'），并且机会因运行页面的设备类型而异对

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

另一方面，如果您在弱设备上运行，您可以在不切换浏览器标签的情况下看到故障：几乎每次动画恢复时， img:last-child时都会出现闪烁的瞬间在动画从最后一个正确的状态中恢复并继续之前，不透明度会暂时设置为1 并在视觉上“显现”。

这只是一个WebKit错误，我无法避免，或者是否有一些棘手的方法来调整我的代码，以便可以处理这个烦人的初始帧闪烁？

Answer 1

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

时使用待消息状态

CSS动画播放状态问题：动画在恢复时跳回到初始帧？

1 个答案: