CSS3 Firefox 动画不工作

Question

我正在使用 anime.js 库创建使用 3 divs 的脉冲效果。此动画在 chrome、opera 和 edge 中正常工作。我在 css 中尝试了不同的供应商前缀，并使用带有关键帧的纯 css 解决方案，但结果是一样的。我也尝试过硬件加速动画，但它几乎不影响性能。

问题在于缩放具有框阴影和渐变样式的 div。有没有办法在不锁定 Mozilla 的情况下创建相同的脉冲/波浪效果？

var circleAnimation = anime({
  targets: '.pulse',
  delay: function(el, index) {
    return index * 500;
  },
  scale: {
    value: 12,
    duration: 5000,
    easing: 'easeOutCubic',
  },
  opacity: {
    value: 0,
    easing: 'easeOutCubic',
    duration: 4500,
  },
  loop: true
});

JS Fiddle: https://jsfiddle.net/hzx3jkhq/1/

谢谢

Answer 1

我试过你的代码笔，发现可以有另一种方法只使用 CSS 来创建这种效果。实际上我一直尝试做的一件事是使用 CSS 预处理器，或者尝试使用 CSS 关键帧动画，这样我就不会依赖 javascript 或 JS图书馆那么多。

所以，我用你的代码笔发现，库正在调整两个属性以获得你在 JavaScript 中键入的效果，它们是从 0.3 到 0 的不透明度，以及转换:( scale() ）从 1（正常元素大小）到 12。我只是通过检查元素发现了这一点。所以我去了 CSS 并将其添加到您的代码中：

.expandAnimation{
    animation: expanding-opacity 4s infinite;
}

/* Expand */

@-moz-keyframes expanding-opacity {
    from { -moz-transform: scale(1);opacity:0.2; }
    to { -moz-transform: scale(12); opacity:0;}
}
@-webkit-keyframes expanding-opacity {
    from { -webkit-transform: scale(1);opacity:0.2; }
    to { -webkit-transform: scale(12); opacity:0;}
}
@keyframes expanding-opacity {
    from {transform:scale(1);opacity:0.2;}
    to {transform:scale(12);opacity:0;}
}

anime.js JavaScript 库在 firefox 中不工作的原因是它的代码周围缺少 mozilla 前缀，因为库会继续并更改 css通过代码，有几种技术可以完全用 JavaScript 来完成，但是，那必须从库的源代码中完成哈哈。

我还添加了这段 JQuery 只是在某个时间操纵它的类:

$('.pulse').each(function(i,element){            
    setTimeout( function () {               
        $(element).addClass('expandAnimation');           
    }, i * 500);            
});

这也有助于在您希望动画停止时停止动画，或轻松更改 CSS 值。

希望对您有所帮助，

狮子座。

CSS3 Firefox 动画不工作

CSS3 Animation Not Working Firefox

css

ajax

jquery

animation

mozilla