Animacja CSS3 nie działa Firefox

Question

Używam biblioteki anime.js do tworzenia efektu pulsowania za pomocą 3 elementów div. Ta animacja działa poprawnie w chrome, operze i krawędzi. Próbowałem różnych prefiksów dostawcy w css i używając czystego rozwiązania css z kluczowymi ramkami, ale wynik jest taki sam. Próbowałem też sprzętu przyspieszającego animację, ale prawie nie wpływającego na wydajność.

Problem polega na skalowaniu elementu div, który ma styl cienia i gradientu. Czy mimo to tworzy się ten sam efekt pulsowania/falowania bez blokowania w Mozilli?

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/

Dzięki

Answer 1

Próbowałem pióra kodu i uświadomić sobie, że nie może być w inny sposób, aby utworzyć ten efekt przy użyciu tylko CSS. Właściwie to zawsze staram się zrobić, to pracować z pre-procesorem CSS, lub po prostu spróbuj z animacjami klatek kluczowych CSS, więc nie polegam tak bardzo na bibliotekach javascript lub JS.

Więc, dowiedziałem się z piórem kodu, że biblioteka poprawiła dwie właściwości, aby uzyskać efekt wpisany w JavaScript, były to krycie od 0,3 do 0, a transformacja: (scale()) z 1 (normalny rozmiar elementu) do 12. Znalazłem to właśnie przez sprawdzenie elementu. Więc poszedłem do CSS i dodać to do Twojego kodu:

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

Powodem anime.js biblioteki javascript nie działa w firefox, to dlatego, że brakuje prefiksy Mozilla gdzieś wokół jego kodu, ponieważ biblioteka idzie z wyprzedzeniem i zmienia kod CSS według kodu, istnieje kilka technik, które można wykonać wyłącznie za pomocą JavaScript, ale trzeba to zrobić z kodu źródłowego biblioteki haha.

także dodałem ten kawałek jQuery tylko manipulować jego zajęcia w określonym czasie:

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

co również może pomóc w zatrzymaniu animację gdy chcesz go zatrzymać, lub łatwo zmieniać wartości CSS.

Mam nadzieję, że będzie w stanie Ci pomóc,

Leo.