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/

感谢

- a_developer

Answer 1

我试了一下你的代码笔记，发现可以用纯CSS实现这个效果的另一种方法。实际上，我总是尝试使用CSS预处理器或CSS关键帧动画来工作，这样我就不会太依赖于JavaScript或JS库。

所以，我发现在你的代码笔记中，该库通过调整两个属性来获得你在JavaScript中键入的效果，这些属性是从0.3到0的不透明度和从1（正常元素大小）到12的transform：（scale（））。我只是通过检查元素找到了这个问题。所以我去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值时进行控制。

希望这能对您有所帮助，

Leo。

- Leo

---

干得好。我匆忙尝试了一个纯CSS版本，但它没有起作用，我也没有进行调查。这里有一个工作的fiddle，供将来看到它的任何人使用 - https://jsfiddle.net/hzx3jkhq/3/ - a_developer

很高兴能帮到你，希望anime.js在未来能够更具跨浏览器兼容性。 - Leo