CSS3 Animasyon Çalışmıyor Firefox

Question

3 div kullanarak darbe efekti oluşturmak için anime.js kütüphanesini kullanıyorum. Bu animasyon krom, opera ve kenarlarda doğru çalışır. CSS'de farklı satıcı öneklerini denedim ve anahtar çerçevelerle salt bir css çözümü kullanıyorum, ancak sonuç aynı. Animasyonu hızlandıran donanımları denedim ancak performansı çok az etkiliyor.

Sorun, kutu gölgesi ve degrade stiline sahip bir div ölçeklendirmesidir. Mozilla'da kilitlenmeden aynı darbe/dalga efektini yaratmak zaten var mı?

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/

Teşekkür

Answer 1

Ben senin kod kalem çalıştı ve sadece CSS kullanarak bu etkiyi yaratmak için başka bir yolu olamayacağını biliyoruz. Aslında her zaman yapmaya çalıştığım bir şey, bir CSS ön-işlemci ile çalışmak ya da sadece CSS anahtar kareleri animasyonları ile denemek, böylece javascript ya da JS kütüphanelerine çok fazla güvenmem.

Kod yazıcınızla birlikte, kitaplığın JavaScript'inize yazdığınız etkiyi elde etmek için iki özelliği değiştirdiğini öğrendim, bunlar 0.3'ten 0'a kadar olan opaklık ve dönüşüm: (scale()) 1 (normal eleman boyutu) ile 12 arasında. Bunu sadece elemanın incelenmesiyle buldum. Bu yüzden CSS gitti ve kodunuzu bu ekledi:

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

JavaScript kütüphanesi onun kod etrafında bir yere mozilla önekleri eksik olduğu için kütüphane gider, çünkü firefox çalışıyor değildir nedeni anime.js Önceden ve kod ile css değiştirir, bu sadece JavaScript ile yapılan elde etmek için çeşitli teknikler vardır, ancak, bu kütüphane haha ​​kaynak kodundan yapılması gerekiyordu.

Ayrıca ben sadece belirli bir zamanda onun sınıfları işlemek için JQuery bu parça ekledi: Ayrıca durdurmak veya kolayca CSS değerlerini değiştirmek istediğinizde animasyonu durdurmak konusunda yardımcı olabilecek

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

. Bu size yardımcı olacaktır

Umut,

Leo.