filter.css

body {
  text-align: center;
}

img {
  max-width: 100%;
  width: 600px;
}

img {
  -webkit-animation: haunted 3s infinite;
  animation: haunted 3s infinite;
}

@keyframes haunted {
  0% {
    -webkit-filter: brightness(20%);
    filter: brightness(20%);
  }
  48% {
    -webkit-filter: brightness(20%);
    filter: brightness(20%);
  }
  50% {
    -webkit-filter: sepia(1) contrast(2) brightness(200%);
    filter: sepia(1) contrast(2) brightness(200%);
  }
  60% {
    -webkit-filter: sepia(1) contrast(2) brightness(200%);
    filter: sepia(1) contrast(2) brightness(200%);
  }
  62% {
    -webkit-filter: brightness(20%);
    filter: brightness(20%);
  }
  96% {
    -webkit-filter: brightness(20%);
    filter: brightness(20%);
  }
  96% {
    -webkit-filter: brightness(400%);
    filter: brightness(400%);
  }
}
//<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/foggy-545838_960_720.jpg">