क्रोम

Question

पर एनिमेट करने वाले एंकरों के अंदर FontAwesome आइकन मैं एक फ़ॉन्ट के अंदर एक फ़ॉन्ट आइकन को एनिमेट करने की कोशिश कर रहा हूं, यह ठीक काम करता है, लेकिन जब मैं आइकन को एंकर के अंदर डालता हूं तो यह क्रोम पर काम करना बंद कर देता है, यह काम करता है।

मैं FontAwesome 3.2.1 उपयोग कर रहा हूँ और यह मेरा कोड

HTML है:

<a> 
    <i class="icon-wrench rotator"></i> 
</a> 

सीएसएस:

.rotator { 
    display: inline-block; 
    -webkit-animation: rotate 2.5s 4 ease; 
    -webkit-transform-origin:90% 35%; 
} 

@-webkit-keyframes rotate { 
    from { 
     -webkit-transform: rotate(-12deg); 
    } 

    to { 
     -webkit-transform: rotate(112deg); 
    } 
} 

मैं FontAwesome 3.0.2 के साथ की कोशिश की और यह काम करता है , जब मैंने 3.2.1 तक अपग्रेड किया, तो कम से कम क्रोम पर काम करना बंद कर दिया।

अग्रिम

संपादित धन्यवाद मैं भी लंगर के अंदर अधिक एचटीएमएल है और मुझे लगता है कि इतना लंगर के लिए 'रोटेटर' वर्ग को जोड़ने यह

काम नहीं चलेगा बारी बारी से नहीं करना चाहते

संपादित यह वास्तविक एचटीएमएल (ऊपर उदाहरण सरलीकृत है) है:

<a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
    <i class="icon-bell-alt icon-animated-bell icon-only"></i> 
    <span class="badge badge-success">5</span> 
</a> 

Answer 1

रोटेटर कक्षा जोड़ें इसके बजाय एंकर के लिए। यह पेज लोड पर घूमना शुरू कर देगा, मान लीजिए कि यह वही है जो आप चाहते हैं?

http://jsfiddle.net/7kANu/4/

<a class="rotator"> 
    <i class="icon-wrench"></i> 
</a> 

संपादित करें: यदि आप एक समाधान के रूप में एक div में आइकन लपेट और उस को रोटेटर वर्ग प्रदान करने में सक्षम नहीं हैं?