jquery - 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 fiddle : 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 值。

希望对你有所帮助

狮子座。