JSFiddle - React, Tailwind, and code Playground

HTML

<section style="padding: calc(50vh - 30px) calc(50vw - 50px)">
  <a href="#" style="text-decoration: none">Bouncing!</a>
</section>

CSS

a {
  display: inline-block; padding: 10px; background: yellow;
  animation: bounce 0.6s infinite; --bounce-distance: 2.5px;
}

a:hover {
  --bounce-distance: 7.5px;
}

@keyframes bounce {
  from { transform: translateY(0px); animation-timing-function: ease-out; }
  33% { transform: translateY(calc(+1 * var(--bounce-distance, 2.5px))); animation-timing-function: ease-in-out; }
  66% { transform: translateY(calc(-1 * var(--bounce-distance, 2.5px))); animation-timing-function: ease-in-out; }
  to { transform: translateY(0px); animation-timing-function: ease-in; }
}

/* reset to avoid inherit */
* { --bounce-distance: 0px; }

/* living in the future: */
@property --bounce-distance {
  syntax: "<length-percentage>";
  initial-value: 0px;
  inherits: false;
}