अवहेलना एनीमेशन: मंडराना

Question

मैं निम्नलिखित सीएसएस एनीमेशन है:

.border-strobe { 
    -webkit-animation: border-strobe-animation 1.5s infinite ease-in-out; 
} 

@-webkit-keyframes border-strobe-animation { 
    0% {border:2px solid #FF1d38;} 
    50% {border:2px solid #000000;} 
    100% {border:2px solid #FF1d38;} 
} 

मूल रूप से, मुझे क्या करना चाहते हैं:

• उदाहरण के लिए मंडराना (ताकि .border-strobe:hover) पर, मैं बदलना चाहते हैं #FF1D38 पर सीमा रंग।

• एक बार जब मैं होवर को छोड़ देता हूं, तो मैं एनीमेशन को सामान्य पाठ्यक्रम चलाने देता हूं।

समस्या यह है कि मेरे पास .border-strobe वर्ग वाले पृष्ठों पर कुछ तत्व हैं और मैं उन्हें समय पर रखना चाहता हूं।

क्या होवर का उपयोग करके सीमा रंग को ओवरराइड करने का एक आसान तरीका है और एनिमेशन को एक दूसरे के साथ संगत रखना है, या वर्तमान में ऐसा करना संभव नहीं है?

क्या यह समझ में आता है?

Answer 1

क्या कोई कारण है कि आप एनीमेशन को अपना सामान्य पाठ्यक्रम जारी रखना चाहते हैं?

यदि आपका होवर रंग एनीमेशन की शुरुआत और अंत जैसा ही है, तो होवर क्लास में सीमा रंग को परिभाषित करते समय आप एनीमेशन पर एनीमेशन क्यों नहीं मारते?

यहाँ मैं मिल सकता है सबसे करीब है: http://jsfiddle.net/xsjJy/

अद्यतन

मैं विश्वास नहीं कर सकता मैं इसके बारे में पहले नहीं सोचा था! यदि आप एचटीएमएल को बदलने के इच्छुक हैं, तो आप मास्क स्पैन (या div या जो कुछ भी चाहते हैं) में फेंक सकते हैं, और जब आप सीमा-स्ट्रोब पर होवर करते हैं तो बस उस सीमा को बदल दें।

यहाँ jsFiddle अद्यतन है: http://jsfiddle.net/xsjJy/2/