從黑白到彩色的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">