在Webkit中显示无并阻止CSS3关键帧动画

在我的html5游戏中，我正在播放一些css3关键帧动画。 在动画播放过程中，用户可以按下暂停按钮，该按钮将div容器（包含播放动画的子容器）设置为显示：无。 回到游戏状态并将div设置为

display:block

后，将强制在Chrome和Safari中重放KeyframeAnimation。 它在Firefox中运行良好

我已经创建了一个JSFIDLE来显示这个问题。 在firefox中，元素继续旋转，在chrome和safari中，元素被重放

我尝试改用

可见性：隐藏，不透明度：0

，但是我对可单击元素有问题（由于不透明度），并且可见性在div元素中不是递归的

如何防止动画在webkit浏览器中重放，或者使用什么替代显示

解决方案 它是zIndex和不透明性的组合： 旧代码：

if(visible) {
            this.domEl.style.display='block';
        } else {
            this.domEl.style.display='none';
        }

新代码：

if(visible) {
        this.domEl.style.zIndex=(this.prevZIndex==undefined?0:this.prevZIndex);
        this.domEl.style.opacity=1;
        console.log(this.name+" "+this.domEl.style.zIndex);
    } else {
        this.prevZIndex=this.domEl.style.zIndex;
        this.domEl.style.opacity=0;
        this.domEl.style.zIndex=-10;
    }
}

---

按

位置隐藏：绝对
且坐标不可见（）：

谢谢你的把戏！不幸的是，它并不完全符合我的需要，因为我还必须保持某些元素可点击，有些则不可点击。。显示：没有人能为我解决这个问题。我现在找到的解决方案是设置负z指数和不透明度的组合！（见我的第一篇帖子）。。不过还是要谢谢你：）
document.getElementById('rotate').onmouseover = function(){
    this.style.cssText = 'position: absolute; top: -9999px;left: -9999px;';
};

document.getElementById('rotate').onmouseout = function(){
    this.removeAttribute('style');
};