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

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download