JSFiddle - React, Tailwind, and code Playground

HTML

<div class="floating"></div>

CSS

.floating{
  width: 50px;
  height: 50px;
  background: red;

}

.floating:hover{
  width: 50px;
  height: 50px;
  background: red;
    animation-name: floating;
    -webkit-animation-name: floating;
 
    animation-duration: 0.3s;   
    -webkit-animation-duration: 0.3s;
 
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}
 
@keyframes floating {
    0% {
        transform: translateY(0%);  
    }
    50% {
        transform: translateY(30%);  
    }   
    100% {
        transform: translateY(0%);
    }           
}
 
@-webkit-keyframes floating {
    0% {
        -webkit-transform: translateY(0%);  
    }
    50% {
        -webkit-transform: translateY(30%);  
    }   
    100% {
        -webkit-transform: translateY(0%);
    }           
}