CSS3 Animation funktioniert nicht Firefox

Question

Ich benutze anime.js Bibliothek, um einen pulsierenden Effekt mit 3 Divs zu erstellen. Diese Animation funktioniert korrekt in Chrome, Oper und Edge. Ich habe verschiedene Hersteller-Präfixe in CSS versucht und eine reine CSS-Lösung mit Schlüsselrahmen, aber das Ergebnis ist das gleiche. Ich habe auch versucht, Hardware die Animation zu beschleunigen, aber es wirkt sich kaum auf die Leistung aus.

Das Problem ist mit der Skalierung eines Div, das Box-Shadow und Farbverlauf Styling hat. Gibt es überhaupt einen solchen pulsierenden/Welleneffekt, ohne dass er in Mozilla stecken bleibt?

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/

Dank

Answer 1

habe ich versucht, den Code Stift und erkennen, dass es eine andere Art und Weise sein, um diesen Effekt zu erstellen, mit CSS. Eigentlich versuche ich immer, mit einem CSS-Preprozessor zu arbeiten, oder versuche einfach mit CSS-Keyframe-Animationen, so dass ich nicht so sehr auf Javascript- oder JS-Bibliotheken angewiesen bin.

Also habe ich mit Ihrem Code-Stift herausgefunden, dass die Bibliothek zwei Eigenschaften optimiert, um den Effekt zu erhalten, den Sie in Ihrem JavaScript eingegeben haben, das waren die Deckkraft von 0,3 bis 0 und die Transformation: (scale()) von 1 (normale Elementgröße) bis 12. Ich habe das herausgefunden, indem ich einfach das Element untersuchte. Also ging ich in die CSS und hat dieses Bild, um Ihren 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;} 
} 

Der Grund anime.js Bibliothek JavaScript ist in Firefox funktioniert, ist, weil es mozilla Präfixe irgendwo um seinen Code fehlt, weil die Bibliothek geht Voraus und ändert die CSS nach Code, gibt es mehrere Techniken, um das rein mit JavaScript zu tun, aber das müsste aus dem Quellcode der Bibliothek haha ​​gemacht werden.

Auch habe ich dieses Stück JQuery nur seine Klassen zu einem bestimmten Zeitpunkt zu manipulieren:

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

die auch in Anhalten der Animation helfen könnte, wenn Sie es beenden möchten, oder die Werte CSS leicht zu ändern.

Hope this werden Sie in der Lage sein

Leo zu helfen.