Eduardo Martins Eduardo Martins - 1 year ago 60
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

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?


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="" alt="Lena Söderberg" style="width: 300px;" class="desaturate">