floating image with grayscale filter on hover

<style>
 .imagen {
     animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
 filter: saturate(100%); transition: all 0.01s ease;
 }

 img:hover { filter: saturate(0%);}

@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }
}


</style>

<img src="https://64.media.tumblr.com/1f2d81472f0476d82cc222b269d773d8/tumblr_osu0r3yF3K1w4fe0do1_500.jpg" class="imagen">