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

Question

मेरे पास CSS3 और कीफ्रेम का उपयोग करके प्ले-बटन (जो एक एंकर टैग है) पर एक सरल "स्पंदन" प्रभाव है।

हालांकि यह क्रोम और सफारी में बेकार ढंग से काम करता है, यह फ़ायरफ़ॉक्स में काम नहीं कर रहा है। क्या किसी के पास कोई विचार है?

li > a { 

    -webkit-animation: pulsate 3s ease-in-out; 
    -moz-animation: pulsate 3s ease-in-out; 
    -o-animation: pulsate 3s ease-in-out; 
    animation: pulsate 3s ease-in-out; 

    -webkit-animation-iteration-count: infinite; 
    -moz-animation-iteration-count: infinite; 
    -o-animation-iteration-count: infinite; 
    animation-iteration-count: infinite; 
} 

@-webkit-keyframes pulsate { 
    0% { 
     -webkit-transform: scale(0.8, 0.8); 
     -moz-transform: scale(0.8, 0.8); 
     -o-transform: scale(0.8, 0.8); 
     transform: scale(0.8, 0.8); 
     opacity: 0.3; 
    } 

    50% { 
     -webkit-transform: scale(1, 1); 
     -moz-transform: scale(1, 1); 
     -o-transform: scale(1, 1); 
     transform: scale(1, 1); 
     opacity: 1.0; 
    } 

    100% { 
     -webkit-transform: scale(0.8, 0.8); 
     -moz-transform: scale(0.8, 0.8); 
     -o-transform: scale(0.8, 0.8); 
     transform: scale(0.8, 0.8); 
     opacity: 0.3; 
    } 
} 

किसी भी मदद की सराहना की जाएगी। धन्यवाद!

Answer 1

आप उन्हें भीतर

@-webkit-keyframes pulsate { 
    0% { 
     -webkit-transform: scale(0.8, 0.8); 
     opacity: 0.3; 
    }  
    50% { 
     -webkit-transform: scale(1, 1); 
     opacity: 1.0; 
    }  
    100% { 
     -webkit-transform: scale(0.8, 0.8); 
     opacity: 0.3; 
    } 
} 
@-moz-keyframes pulsate { 
    0% { 
     transform: scale(0.8, 0.8); 
     opacity: 0.3; 
    }  
    50% { 
     transform: scale(1, 1); 
     opacity: 1.0; 
    }  
    100% { 
     transform: scale(0.8, 0.8); 
     opacity: 0.3; 
    } 
} 
@-ms-keyframes pulsate { 
    0% { 
     -ms-transform: scale(0.8, 0.8); 
     opacity: 0.3; 
    }  
    50% 
     -ms-transform: scale(1, 1); 
     opacity: 1.0; 
    }  
    100% { 
     -ms-transform: scale(0.8, 0.8); 
     opacity: 0.3; 
    } 
} 
@-o-keyframes pulsate { 
    0% { 
     transform: scale(0.8, 0.8); 
     opacity: 0.3; 
    }  
    50% 
     transform: scale(1, 1); 
     opacity: 1.0; 
    }  
    100% { 
     transform: scale(0.8, 0.8); 
     opacity: 0.3; 
    } 
} 
@keyframes pulsate { 
    0% { 
     transform: scale(0.8, 0.8); 
     opacity: 0.3; 
    }  
    50% { 
     transform: scale(1, 1); 
     opacity: 1.0; 
    }  
    100% { 
     transform: scale(0.8, 0.8); 
     opacity: 0.3; 
    } 
} 

इसके अलावा उनके ब्राउज़र-विशिष्ट रूपांतरण के साथ ब्राउज़र-विशिष्ट-फ़्रेम एनिमेशन शामिल करने की जरूरत है, तो आप पूर्ण ब्राउज़र समर्थन प्राप्त करने के -ms-animation समकक्ष जोड़ना चाहिए।

---

इन दिनों, इनमें से बहुत से सुरक्षित रूप से छोड़े जा सकते हैं। अपने लक्षित ब्राउज़र का समर्थन करने के लिए आपको कौन से लोगों को शामिल करने की आवश्यकता है, यह जानने के लिए this post देखें।