Animazione CSS3 non funziona Firefox

Question

Sto usando la libreria anime.js per creare un effetto pulsante utilizzando 3 div. Questa animazione funziona correttamente in chrome, opera e edge. Ho provato diversi prefissi per i fornitori in css e usando una soluzione css pura con fotogrammi chiave, ma il risultato è lo stesso. Ho anche provato l'hardware per accelerare l'animazione, ma a malapena ha effetto sulle prestazioni.

Il problema è con il ridimensionamento di un div che ha lo stile casella-ombra e gradiente. Esiste comunque la possibilità di creare questo stesso effetto a impulsi/onde senza bloccarsi 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/

Grazie

Answer 1

ho provato la penna codice e rendersi conto che non ci può essere un altro modo per creare questo effetto utilizzando solo i CSS. In realtà, una cosa che cerco sempre di fare, è lavorare con un pre-processore CSS, o semplicemente provare con animazioni di keyframe CSS, così da non dipendere più tanto dalle librerie javascript o JS.

Quindi, ho scoperto con la penna del codice che la libreria stava modificando due proprietà per ottenere l'effetto digitato nel tuo JavaScript, quelle erano l'opacità da 0,3 a 0 e la trasformazione: (scala()) da 1 (dimensione normale dell'elemento) a 12. L'ho scoperto solo ispezionando l'elemento. Così sono andato al CSS e aggiunto questo al codice:

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

La ragione anime.js libreria JavaScript non funziona in Firefox, è perché manca prefissi mozilla da qualche parte intorno al suo codice, perché la libreria va avanti e cambia il css in base al codice, ci sono diverse tecniche per ottenere quello fatto puramente con JavaScript, ma, che dovrebbe essere fatto dal codice sorgente della libreria haha.

Inoltre ho aggiunto questo pezzo di JQuery per manipolare solo le sue classi in un determinato momento:

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

Il che potrebbe anche aiutare a fermare l'animazione ogni volta che si desidera interrompere o modificare i valori CSS facilmente.

Spero che questo sarà in grado di aiutarvi,

Leo.