CSS3 动画不起作用 Firefox

Question

我正在使用anime.js 库来创建一个使用3 个div 的脉冲效果。此动画在 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 小提琴： https://jsfiddle.net/hzx3jkhq/1/

谢谢

Answer 1

我尝试了您的代码笔并意识到可以使用另一种方法来仅使用 CSS 来创建此效果。实际上，我一直尝试做的一件事是使用 CSS 预处理器，或者只是尝试使用 CSS 关键帧动画，这样我就不会那么依赖 javascript 或 JS 库。

所以，我用您的代码笔发现，该库正在调整两个属性以获得您在 JavaScript 中键入的效果，它们是从 0.3 到 0 的不透明度，以及从 1 的 transform:(scale() ) （正常元素大小）到 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 值。

希望对你有帮助，

狮子座。