CSSの白黒から黒への画像の切り替え

Question

白黒の画像が多く、色付きの画像に変換され、:hoverセレクタが付いたウェブサイトがあります。私がしようとしているのは同じですが、ユーザーとのやり取りはありません。たとえば、画像は白黒で開始し、10秒後に色付きのバージョンにフェードします。

これはCSSで可能ですか？

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