Rotation de la teinte au survol et suppression du filtre en niveaux de gris

Question

J'ai une image colorée. J'ai un filtre en niveaux de gris appliqué au chargement initial. Et au survol de l'image, je supprime le filtre en niveaux de gris. Cependant, j'aimerais aussi faire tourner la couleur du filtre de teinte au survol de l'image. Mais je ne comprends pas pourquoi cela ne fonctionne pas.

Merci pour toute aide !

JS FIDDLE

HTML

<div id="duplicater0" class="flavNameDescBox addnewflavorimg col-4"> 
<img src="http://lorempixel.com/400/200/sports/1/"/>
</div>

CSS

  .addnewflavorimg img{
    margin-left:-21px;
    margin-top:-20px;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    }

  .addnewflavorimg img:hover{
    -webkit-filter: none;
    filter: none;
    -webkit-animation: hue 3s infinite;
    animation: hue 3s infinite;
    }

Answer 1

Comme ça ? En utilisant @keyframes vous pouvez hue-rotate de 0deg a 360deg

https://jsfiddle.net/1Ljys5gj/

@keyframes hue {
  0% {
   -webkit-filter: hue-rotate(0deg);
  }
  100% {
   -webkit-filter: hue-rotate(360deg);
  }
}

Answer 2

.addnewflavorimg img{
    margin-left:-21px;
    margin-top:-20px;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    }

  .addnewflavorimg img:hover{
    -webkit-filter: none;
    filter: none;
    -webkit-animation: hue 3s infinite;
    animation: hue 3s infinite;
    }

   @keyframes hue{
       0%{
           transform: rotate(0deg);
       }
       100%{
           transform: rotate(360deg);
       }
   }

<div id="duplicater0" class="flavNameDescBox addnewflavorimg col-4"> 
    <img src="http://lorempixel.com/400/200/sports/1/"/>
</div>