<div class="bouncy">
  B
</div>

html{
  width : 100%;
  height : 100%;
  display : flex;
  justify-content : center;
  align-items : center;
  box-sizing : border-box;
  background-color : #010B14;
  color : #56f045;
  font-family : "Comic Sans", sans-serif;
}
.bouncy {
  font-size : 15rem;
}
.bouncing {
  animation : rubberband 800ms alternate ease-out;
}
@keyframes rubberband {
    0%{
        transform: scaleX(1);
    }
    40%{
        transform: scaleX(1.12) scaleY(0.75);
    }
    55%{
        transform: scaleX(0.85) scaleY(1);
    }
    65%{
        transform: scaleX(1.09) scaleY(0.85);
    }
    75%{
        transform: scaleX(0.9)  scaleY(1);
    }
    90%{
        transform: scaleX(1.05) scaleY(0.95);
    }
    100%{
        transform: scaleX(1) scaleY(1);
    }
}

const bouncy = document.querySelector(".bouncy");

bouncy.addEventListener("mouseenter", toggleRubberBand);

function toggleRubberBand(e){
  bouncy.classList.add("bouncing");
  bouncy.addEventListener("animationend", ()=>{
    bouncy.classList.remove("bouncing");
  });
}