काले सफेद रंग से सीएसएस संक्रमण छवि

Question

मैंने कई वेबसाइटें देखी हैं जिनमें एक काले और सफेद छवि है जो :hover चयनकर्ता के साथ रंगीन संस्करण में संक्रमण करती है। जो मैं करने की कोशिश कर रहा हूं वह वही है लेकिन उपयोगकर्ता की बातचीत के बिना। उदाहरण के लिए, छवि काले और सफेद शुरू होगी और 10 सेकंड के बाद अपने रंगीन संस्करण में फीका होगा।

क्या यह सीएसएस के साथ संभव है?

Answer 1

इस तरह?

@keyframes toColor { 
 
    0% { -webkit-filter: grayscale(100%); filter: grayscale(100%); } 
 
    25% { -webkit-filter: grayscale(75%); filter: grayscale(75%); } 
 
    50% { -webkit-filter: grayscale(50%); filter: grayscale(50%); } 
 
    75% { -webkit-filter: grayscale(25%); filter: grayscale(25%); } 
 
    100% { -webkit-filter: grayscale(0%); filter: grayscale(0%); } 
 
} 
 

 

 
img.desaturate { 
 
    animation: toColor 10s; 
 
}

<img src="http://i.imgur.com/gMPdDHk.jpg" alt="Lena Söderberg" style="width: 300px;" class="desaturate">