2

我得到了类似以下的内容，这是一个在两个图像之间交叉淡入淡出的 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's opacity 被短暂设置为 1并在视觉上“出现” ，在动画可以从上一个正确状态恢复并继续之前。

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

4

1 回答 1

0

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

于 2013-07-18T09:59:18.430 回答