Immagine di transizione CSS da bianco nero a colore

Question

Ho visto molti siti Web che hanno un'immagine in bianco e nero che passa a una versione colorata con un selettore :hover. Quello che sto cercando di fare è lo stesso, ma senza interazione con l'utente. Ad esempio, l'immagine dovrebbe iniziare in bianco e nero e sfumare alla sua versione colorata dopo 10 secondi.

Ciò è possibile con i CSS?

Answer 1

Ti piace questo?

@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">