Hoạt ảnh CSS3 không hoạt động Firefox

Question

Tôi đang sử dụng thư viện anime.js để tạo hiệu ứng đập bằng 3 div. Hoạt ảnh này hoạt động chính xác trong chrome, opera và cạnh. Tôi đã thử các tiền tố nhà cung cấp khác nhau trong css và sử dụng một giải pháp css thuần túy với các khung chính, nhưng kết quả là như nhau. Tôi cũng đã thử phần cứng tăng tốc hoạt hình nhưng nó hầu như không ảnh hưởng đến hiệu suất.

Vấn đề là chia tỷ lệ div có kiểu đổ bóng và kiểu gradient. Có cách nào để tạo hiệu ứng sóng/sóng tương tự mà không bị khóa trong Mozilla không?

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/

Cảm ơn

Answer 1

tôi đã cố gắng bút mã của bạn và nhận ra rằng có thể có một cách khác để tạo ra hiệu ứng này chỉ sử dụng CSS. Thực ra một điều tôi luôn cố gắng làm là làm việc với một bộ xử lý trước CSS, hoặc chỉ thử với các hình động CSS keyframes, để tôi không phụ thuộc vào các thư viện javascript hoặc JS nhiều. Vì vậy, tôi đã phát hiện ra với bút mã của bạn, thư viện đã chỉnh sửa hai thuộc tính để có được hiệu ứng bạn đã nhập trong JavaScript của bạn, đó là độ mờ từ 0,3 đến 0 và biến đổi: (scale()) từ 1 (kích thước phần tử bình thường) đến 12. Tôi phát hiện ra rằng chỉ bằng cách kiểm tra phần tử. Vì vậy, tôi đã đi đến CSS và bổ sung này để mã của bạn:

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

Các anime.js lý do thư viện JavaScript không hoạt động trong firefox, là bởi vì nó thiếu tiền tố mozilla ở đâu đó xung quanh mã của nó, bởi vì thư viện đi phía trước và thay đổi mã nguồn theo mã, có một số kỹ thuật để làm điều đó hoàn toàn với JavaScript, nhưng, điều đó sẽ phải được thực hiện từ mã nguồn của thư viện haha.

Ngoài ra tôi thêm mảnh này của JQuery để chỉ thao tác các lớp học của nó tại một thời điểm nhất định:

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

nào cũng có thể giúp đỡ trong việc ngăn chặn các hình ảnh động bất cứ khi nào bạn muốn nó dừng lại, hoặc thay đổi các giá trị CSS dễ dàng.

Hy vọng điều này sẽ có thể giúp bạn,

Leo.