CSS geçiş resmi siyah beyazdan renkli

Question

Siyah beyaz bir görüntüye sahip, çok sayıda web sitesini, :hover seçicisiyle renkli bir sürüme geçiren pek çok web sitesi gördüm. Yapmaya çalıştığım şey aynı ama kullanıcı etkileşimi olmadan. Örneğin, görüntü siyah beyaz başlar ve 10 saniye sonra renkli versiyonuna döner.

Bu, CSS ile mümkün mü?

Answer 1

Bunu beğendiniz mi?

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