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（普通元素）的转换：(scale() ) size) 到 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 值。

希望本文能够对您有所帮助，

利奥.