Geek Answers Handbook

CSS transition image from black to color

I saw many websites with a black and white image that goes into the color version with the :hover selector. What I'm trying to do is the same, but without user interaction. For example, the image will start in black and white and disappear to the color version after 10 seconds.

Is this possible with CSS?

+8
html css css-animations
source share
1 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%); } 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">
+11
source share

More articles:


All Articles