CSS Animatable filter Property Example

<!DOCTYPE html>
<html>
<head>
<style> 
img {
	width: 100%;
	animation: anim 5s infinite;
}

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

<h1>Animatable 'filter' Property</h1>
<hr>

<p>Experience the changing colors of the image to greyscale using filter property.<p>
<img src="images/coast.jpg" alt="Coastal Wind Turbines" />
</body>
</html>