Волна букв

Буквы ссылки подпрыгивают волной слева направо при наведении.

Наводите на строки.

Код

<a class="wave" href="#">ССЫЛКА</a>

<style>
.wave span { display: inline-block; }
.wave:hover span {
  animation: w .5s cubic-bezier(.16,1,.3,1);
  animation-delay: calc(var(--i) * 30ms);   /* волна слева направо */
  color: #E84B16; }
@keyframes w {
  30% { transform: translateY(-.18em); }
  60% { transform: translateY(.06em); }
  100% { transform: none; } }
</style>

<script>
document.querySelectorAll(".wave").forEach(function (el) {
  var t = el.textContent;
  el.textContent = "";
  Array.prototype.forEach.call(t, function (ch, i) {
    var sp = document.createElement("span");
    sp.textContent = ch;
    if (ch === " ") sp.style.width = ".3em";
    sp.style.setProperty("--i", i);
    el.appendChild(sp);
  });
});
</script>

Промпт для ИИ

Сделай волну букв по ховеру: JS разбивает текст ссылки на span-буквы с переменной --i; при :hover каждая буква прыгает keyframes-анимацией (вверх -0.18em к 30%, лёгкий перелёт вниз к 60%, на место к 100%) за 0.5s по cubic-bezier(0.16,1,0.3,1) с задержкой i*30ms — волна бежит слева направо, буквы попутно окрашиваются в акцент. Пробелам ширина 0.3em.