सीएसएस एनीमेशन "परिणत: पैमाने" सफारी में काम नहीं कर रहा है और संभवत: अन्य ब्राउज़रों

Question

@-webkit-keyframes scaleIn { 
    from {-webkit-transform: scale(0);} 
    to {-webkit-transform: scale(1);} 
} 

.animate-log-in { 
    animation-name: scaleIn; 
    animation-duration: 0.5s; 
} 

यह क्रोम (मैक OSX) के नवीनतम संस्करण पर काम कर रहा है, लेकिन सफारी का नवीनतम संस्करण और एक पुराने संस्करण में नहीं (मुझे लगता है कि) क्रोम। क्या मुझे कुछ जोड़ने की ज़रूरत है?

Answer 1

नीचे कोड जोड़ें और कोशिश पर 100% से लेकर मूल्यों के लिए।

.animate-log-in { 
    -webkit-animation: scaleIn; 
    -webkit-animation-duration: 0.5s; 
    animation: scaleIn; 
    animation-duration: 0.5s; 
} 
@-webkit-keyframes scaleIn { 
    from { 
     -webkit-transform: scale(0); 
    } 
    to { 
     -webkit-transform: scale(1); 
    } 
} 
@keyframes scaleIn { 
    from { 
     transform: scale(0); 
    } 
    to { 
     transform: scale(1); 
    } 
} 

Answer 2

scale के बजाय

zoom कोशिश, webkits पैमाने 1, 1.5 = 150% के रूप में और इतने

Answer 3

मैंने स्केल एनिमेट करते समय एक और सफारी मुद्दा देखा।

लगता है कि अगर सफारी display: inline (उदाहरण के लिए एक अवधि है) सफारी आपके पैमाने का सम्मान नहीं करता है। इसे ब्लॉक या इनलाइन-ब्लॉक बनाएं।

यह एनीमेशन-विशिष्ट नहीं है। यह बिना एनीमेशन के पैमाने को बदलने के लिए भी जाता है।

यह सफारी 9. इसके अलावा आईओएस 9.

क्रोम के मोबाइल सफारी के साथ साथ था इस मुद्दे नहीं है। यह खुशी से इनलाइन तत्व के पैमाने को बदल देगा।

JSFiddle कार्रवाई में यह देखने के लिए: https://jsfiddle.net/ca64gkma/5/