隐藏后的CSS无限动画未重置(Chrome)

Question

这里我有一个CSS关键帧动画的例子(你可以在这个Demo上看到整个事情)

代码将每1.4秒将img缩放到0.75并返回其原始(1)比例.这很好.

然后我添加一个简单的jQuery代码来模拟错误:

setTimeout(function () {
    $("img").css('visibility', 'hidden');
    activate();
}, 3000);

function activate() {
    setTimeout(function () {
        $("img").css('visibility', 'visible');
    }, 3000);
}

@-webkit-keyframes imagebulger {
    to {
        -webkit-transform: scale(.75);
        transform: scale(.75);
    }
}
@keyframes imagebulger {
    to {
        -webkit-transform: scale(.75);
        transform: scale(.75);
    }
}
img {
    -webkit-animation: imagebulger 1.4s infinite alternate;
    -moz-animation: imagebulger 1.4s infinite alternate;
    -o-animation: imagebulger 1.4s infinite alternate;
    animation: imagebulger 1.4s infinite alternate;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://placehold.it/200x200" />

这将在3秒后和3秒内隐藏img元素.当img元素返回到可见时,调整大小效果将不再运行.

它发生在Chrome 41.0.2272(Ubuntu)中.在Firefox中它按预期工作.

---

编辑

看起来像是Chrome中的错误.我开了一个问题.作为一种解决方法,如建议,在设置后使用display:none代替vissibility:hidden或添加类vissibility:visible

编辑2 此处打开了一个问题:https://code.google.com/p/chromium/issues/detail？id = 444852

Answer 1

我之前遇到过动画停止执行的问题。对我来说，解决方案始终是每当我希望动画重新启动时将动画作为一个类重新应用。我用这个解决方案修改了你的小提琴：

http://jsfiddle.net/q234Lsx8/5/

我将 CSS 规则应用于img.bulge，然后 jQuery 代码删除并添加bulge隐藏和显示的类。