Animated Filter

by Ananda Projapati

HTML

<h2>
Animated Filter
</h2>
<figure>
  <img src="https://static.pexels.com/photos/69825/sunbeam-fog-autumn-nature-69825.jpeg" />
</figure>

CSS

body {
  font-family: arial;
}

img {
  width: 100%;
  height: 100%;
  margin: 0;
}

figure {
  position: relative;
  margin: 0;
  padding: 0;
  display: inline-block;
  -webkit-animation:forest-night 10s infinite;
  animation:forest-night 10s infinite;
}

@-webkit-keyframes forest-night {
  0% {
    filter:hue-rotate(0deg) brightness(0%);
  }
  10% {
    filter:hue-rotate(0deg) brightness(50%);
  }
  20% {
    filter:hue-rotate(0deg) brightness(100%);
  }
  50% {
    filter:hue-rotate(0deg) brightness(2);
  }
  70% {
    filter:hue-rotate(220deg) brightness(50%);
  }
  100% {
    filter:hue-rotate(0deg) brightness(0%);
  }
}
@keyframes forest-night {
  0% {
    filter:hue-rotate(0deg) brightness(0%);
  }
  10% {
    filter:hue-rotate(0deg) brightness(50%);
  }
  20% {
    filter:hue-rotate(0deg) brightness(100%);
  }
  50% {
    filter:hue-rotate(0deg) brightness(2);
  }
  70% {
    filter:hue-rotate(220deg) brightness(50%);
  }
  100% {
    filter:hue-rotate(0deg) brightness(0%);
  }
}