Try it Yourself

<!DOCTYPE html>
<html>
<head>
<style> 
img {
    -webkit-animation: mymove 7s infinite; /* Chrome, Safari, Opera */
    animation: mymove 7s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    50% {
        -webkit-filter: grayscale(100%); 
        filter: grayscale(100%);
    }
}

/* Standard syntax */
@keyframes mymove {
    50% {
        -webkit-filter: grayscale(100%); 
        filter: grayscale(100%);
    }
}
</style>
</head>
<body>

<p>Gradually change the color of the image to black and white (100% grayscale), and back to its original colors:<p>

<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">

<p>The filter property is <em>animatable</em> in CSS.</p>
<p><strong>Note:</strong> The filter property is not supported in Internet Explorer, Edge 12, or Safari 5.1 and earlier.</p>

</body>
</html>
Top Tutorials

Top References

Top Examples

Web Certificates
