CSS3 Animation Not Working Firefox

Question

I am using anime.js library to create a pulsing effect using 3 divs. This animation works correctly in chrome, opera and edge. I have tried different vendor-prefixes in css and using a pure css solution with key frames, but the result is the same. I have also tried hardware accelerating the animation but it barely effects performance.

The issue is with scaling a div that has box-shadow and gradient styling. Is there anyway to create this same pulsing / wave effect without it locking up in 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/

Thanks

Answer 1

I tried your code pen and realize that there can be another way to create this effect using just CSS. Actually one thing I always try to do, is to work with a CSS pre-processor, or just try with CSS keyframes animations, so that I don't depend on javascript or JS libraries that much.

So, I found out with your code pen, that the library was tweaking two properties to get the effect you typed in your JavaScript, those were the opacity from 0.3 to 0, and the transform:(scale() ) from 1 (normal element size) to 12. I found that out just by inspecting the element. So I went to the CSS and added this to your code:

.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;}
}

The reason anime.js JavaScript library isn't working in firefox, is because it is lacking mozilla prefixes somewhere around its code, because the library goes ahead and changes the css by code, there are several techniques to get that done purely with JavaScript, but, that would have to be done from the source code of the library haha.

Also I added this piece of JQuery to just manipulate its classes at a certain time:

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

Which also could help in stopping the animation whenever you want it to stop, or change the CSS values easily.

Hope this will be able to help you,

Leo.