Eduardo Martins Eduardo Martins - 4 months ago 17
CSS Question

CSS transition image from black white to color

I've seen many websites that have a black and white image that transitions to a colored version with a

:hover
selector. What I'm trying to do is the same but with no user interaction. For example, the image would start black and white and fade to its colored version after 10 seconds.

Is this possible with CSS?

Answer

Like this?

@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%); }
    50%   { -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">