JSFiddle - React, Tailwind, and code Playground

HTML

<img src="https://www.linux.org.ru/photos/60688:861557243.jpg" alt="" class="photo">

CSS

@keyframes ololo {
  0% {
    filter: grayscale(0) hue-rotate(180deg) saturate(3);
  }
  59% {
    filter: grayscale(0) hue-rotate(180deg) saturate(3);
  }
  60% {
    filter: grayscale(1) hue-rotate(0deg) saturate(1);
  }
  100% {
    filter: grayscale(1) hue-rotate(0deg) saturate(1);
  }
}
img.photo:hover {
  animation-name: ololo;
  animation-duration: 15s;
  animation-iteration-count: infinite;
}