CSS3 संक्रमण एक रंग जोड़ना चाहते हैं और इसे दूर करना चाहते हैं

Question

मैं एक डीआईवी पृष्ठभूमि बनाना चाहता हूं (जिसमें पृष्ठभूमि रंग नहीं है) फ्लैश लाल फिर रिक्त करने में आसानी करें। अब मैंने पृष्ठभूमि रंग में एक आसान जोड़ने के लिए प्रश्न और CSS3 में एक नया वर्ग (जो लाल जोड़ता है) को जोड़ने के लिए जेएस का उपयोग किया है। लेकिन यह इसे आसान बनाता है, मैं चाहता हूं कि यह लाल हो जाए तो आराम करें। मुझे लगता है कि मैं देरी के बाद एकाधिक क्लास जोड़ने के लिए जेएस का उपयोग कर ऐसा कर सकता हूं। लेकिन CSS3 को पूरी तरह से ऐसा करने के लिए इस्तेमाल किया जा सकता है?

Answer 1

यदि आप किसी हाइलाइटिंग की तरह कुछ चाहते हैं तो आप CSS3 एनीमेशन का उपयोग करना चाहेंगे। वे पुराने ब्राउज़र में समर्थित नहीं हैं। इसके लिए caniuse देखें।

मैंने एक छोटा उदाहरण over here बनाया है।

लिंक पर क्लिक करने पर हाइलाइट कहा जाता है। यहां सीएसएस है (विक्रेता-उपसर्ग के बिना):

@keyframes highlight { 
    0% { 
    background: red 
    } 
    100% { 
    background: none; 
    } 
} 

#highlight:target { 
    animation: highlight 1s; 
} 

Answer 2

ऐसा करने का एक तरीका jQuery UI एनिमेट विधि का उपयोग करना है, जो पृष्ठभूमि-रंग जैसी चीज़ों को प्रभावित करने के लिए "सामान्य" jQuery एनिमेट() को बढ़ाता है।

इस तरह के संक्रमण सीएसएस 3 में संभव है, लेकिन स्पष्ट रूप से व्यापक ब्राउज़र समर्थन के साथ नहीं।

#maDiv { 
    -webkit-transition:background-color 0.5s linear; 
    -moz-transition: background-color 0.5s linear; 
    -o-transition: background-color 0.5s linear; 
    height: 20px; 
    width: 20px; 
    background:#000; 
} 

#maDiv:hover { 
    background: #ff0; 
} 

उपयोगकर्ता डिव घूमता है जब कि रंग फीका करना होगा, और इसे वापस नहीं हो पाती जब माउस बाहर है, 0.5 सेकंड से अधिक। ब्राउज़र समर्थन विवरण के लिए, यहां "सीएसएस 3 संक्रमण" देखें: http://www.html5rocks.com/en/features/presentation