Çapraz Tarayıcı CSS3 Keyframe Animasyon Firefox

Question

CSS3 ve anahtar kareleri kullanarak, oynatma düğmesinde (bir anchor etiketi olan) basit bir "titreşimli" efektim var.

Chrome ve Safari'de kusursuz şekilde çalışırken, Firefox'ta çalışmıyor gibi görünüyor. Neden olduğu hakkında bir fikri olan var mı?

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

Herhangi bir yardım çok takdir edilecektir. Teşekkürler!

Answer 1

Sen tam tarayıcı desteği almak için -ms-animation eşdeğer eklemek gerekir,

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

Ayrıca içlerinde kendi tarayıcıya özel dönüşümleri ile tarayıcıya özel anahtar kare animasyonlar eklemeniz gerekir.

---

Bu günlerde bunların çoğu güvenli bir şekilde dışarıda bırakılabilir. Hedef tarayıcılarınızı desteklemek için dahil etmeniz gerekenleri öğrenmek için this post adresine bakın.