hoverすると文字がslideする

Question

hoverするとテキストが動く形にしたいです。
ネットであさってみても全く出てこないので、知っている方がいれば教えていただきたいです。

参考は「https://rinn.co.jp/」のheaderの文字です。

jsでもcssでもいいので、知恵を貸していただける方、よろしくお願いします。

Answer 1

参考先があるのでしたら、「それっぽい動きはどうやったらできるか」を探すのではなく、その参考先を解析してみては。
競合サイトのCSSとJavaScriptを丸裸にする方法

蛇足：
あくまで「知恵」を貸しました。
このような質問の仕方でそのままの答えが出てくることはほぼありません（参考先がある以上、余計に）

Answer 2

見た感じ、できるだけ似せるようにしてみましたが、こんな感じでしょうか。
完全再現ではないですが、参考になれば。

<span class="header-menu" text="Menu1"></span>

.header-menu {
  position: relative;
  font-weight: bold;
}

.header-menu::before {
  content: attr(text);
  position: absolute;
  top: 0;
}

.header-menu:hover::before {
  animation: before .4s;
}

.header-menu::after {
  content: attr(text);
  position: absolute;
  top: .5rem;
  opacity: 0;
}

.header-menu:hover::after {
  animation: after .4s;
}

@keyframes before {
  100% {
    top: -.5rem;
    opacity: 0;
  }
}

@keyframes after {
  100% {
    top: 0;
    opacity: 1;
  }
}

Answer 3

trancerateとかcalcを使えばいけるかもしれません

• codepen css move menu