Javascript 在Firefox中暂停带有Jquery故障的CSS动画

我有两个气泡div，它们与CSS动画一起浮动。使用jQuery，我希望在悬停时停止动画，并在用户不再悬停时继续

在Chrome中，一切都运行得很好，但Firefox决定在暂停之前先解决这个问题。看起来是在暂停之前先重置气泡动画

这是你的电话号码

我用来暂停它的唯一代码是：

// Set the hover and hoverOut
jQuery('.bubble').hover(function () {
    // Pause the CSS animation
    jQuery(this).css('-webkit-animation-play-state', 'paused')
                .css('animation-play-state', 'paused');
}, function () {
    jQuery(this).delay(1000).queue(function (next) {
        // Run the animation again after a delay
        jQuery(this).css('-webkit-animation-play-state', 'running')
                    .css('animation-play-state', 'running')
                    .css({zIndex: jQuery(this).data('oldZindex')
        });
        next();
    });
});

---

有人知道我做错了什么或我忽略了什么吗？

从

气泡CSS中删除
过渡
，它会覆盖动画并从其初始位置开始重试

CSS

div.liljon div#bubbles .bubble {
    overflow: hidden;
    position: absolute;
    opacity: 0;
    display: none;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    /** your remaining background and other properties here */;
}

在like中也使用
键值对对象

Use-moz动画播放状态适用于Mozilla您使用它是正确的，但是没有它也可以工作。暂停按预期进行，只是气泡在暂停前移动，然后在暂停时反弹。这是chrome没有显示的一个奇怪的小故障。更新：我似乎也能够在chrome中复制这个问题，通过删除保存气泡上动画的类（x1、x2或x3）。但我不知道如何在Firefox中防止它。。看起来Firefox在悬停时完全删除了动画。即使我没有用上面的代码暂停，只是改变了气泡的大小。
// Set the hover and hoverOut
jQuery('.bubble').hover(function () {
    // Pause the CSS animation
    jQuery(this).css({'-webkit-animation-play-state': 'paused',
                      'animation-play-state': 'paused'});
}, function () {
    jQuery(this).delay(1000).queue(function (next) {
        // Run the animation again after a delay
        jQuery(this).css({'-webkit-animation-play-state': 'running',
                          'animation-play-state':'running',
                          zIndex: jQuery(this).data('oldZindex')
        });
        next();
    });
});