CSS3 एनीमेशन फ़ायरफ़ॉक्स

Question

काम नहीं कर रहा है मैं 3 divs का उपयोग कर एक स्पंदन प्रभाव बनाने के लिए anime.js लाइब्रेरी का उपयोग कर रहा हूं। यह एनीमेशन क्रोम, ओपेरा और एज में सही ढंग से काम करता है। मैंने सीएसएस में विभिन्न विक्रेता-उपसर्गों की कोशिश की है और कुंजी फ्रेम के साथ एक शुद्ध सीएसएस समाधान का उपयोग किया है, लेकिन नतीजा वही है। मैंने एनीमेशन को तेज करने के हार्डवेयर को भी कोशिश की है, लेकिन यह मुश्किल से प्रदर्शन को प्रभावित करता है।

समस्या एक div को स्केल करने के साथ है जिसमें बॉक्स-छाया और ढाल स्टाइल है। मोज़िला में लॉक होने के बिना वही पल्सिंग/तरंग प्रभाव बनाने के लिए वैसे भी है?

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

जे एस फिडल: https://jsfiddle.net/hzx3jkhq/1/

धन्यवाद

Answer 1

मैं अपने कोड कलम करने की कोशिश की और महसूस एक और तरीका है इस आशय सिर्फ सीएसएस का उपयोग कर बनाने के लिए वहाँ हो सकता है। असल में एक चीज जो मैं हमेशा करने की कोशिश करता हूं, एक सीएसएस प्री-प्रोसेसर के साथ काम करना है, या बस सीएसएस कीफ्रेम एनीमेशन के साथ प्रयास करें, ताकि मैं जावास्क्रिप्ट या जेएस पुस्तकालयों पर ज्यादा निर्भर न हो।

तो, मुझे आपके कोड कलम के साथ पता चला, कि लाइब्रेरी आपके जावास्क्रिप्ट में आपके द्वारा टाइप किए गए प्रभाव को प्राप्त करने के लिए दो गुणों को ट्वीव कर रही थी, वे 0.3 से 0 की अस्पष्टता थीं, और ट्रांसफ़ॉर्म: (स्केल()) से 1 (सामान्य तत्व आकार) 12 तक। मैंने पाया कि तत्व का निरीक्षण करके। तो मैं सीएसएस के पास गया और अपने कोड को यह कहा:

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

कारण anime.js JavaScript लाइब्रेरी, फ़ायरफ़ॉक्स में काम नहीं कर रहा है, क्योंकि यह अपने कोड के आसपास mozilla उपसर्गों कमी है कहीं न कहीं, क्योंकि पुस्तकालय चला जाता है कोड से सीएसएस को आगे बढ़ाएं और जावास्क्रिप्ट के साथ पूरी तरह से करने के लिए कई तकनीकें हैं, लेकिन, लाइब्रेरी हाहा के स्रोत कोड से इसे करना होगा।

इसके अलावा, मैं JQuery के इस टुकड़े जोड़ा सिर्फ एक निश्चित समय पर अपनी कक्षाओं में हेरफेर करने के:

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

कौन सा भी एनीमेशन जब भी आप इसे रोकने, या आसानी से सीएसएस मूल्यों को बदलना चाहते हैं को रोकने में मदद कर सकता है।

आशा इस तुम्हारी मदद करने में सक्षम हो जाएगा,

सिंह।