Как создать анимацию разъезжающего текста при наведении?

Question

[NoobInProg]

Я не знаю как создать анимацию разъезжающего текста. Задумка была такая, банальная - Есть буквы "HR", при наведении или при открытии страницы они должны были разъехаться в разные стороны и образовать слово "Harmony Readers". Подскажите как это реализовать

Comments

[Kentavr16]

Я бы попробовал поместить их before,after , и увелививать ширину родительского контейнера. Анимировать прозрачность ещё при желании

[Модератор]

На вопрос «как сделать» отвечает документация и поиск в интернет.

Тут отвечают на вопросы «почему я сделал, как в документации, а оно не работает. Поискал в интернет, вот запросы, в ответах не нашел. Что я делаю не так?»

Покажите, как вы пробовали решить проблему, приведите код попытки (пусть неудачной), опишите, как запускали, что ожидали и что получилось.
За готовыми решениями - на фриланс. В текущем виде это не вопрос, а задание. Нарушен п.5.12 Регламента.

[Модератор]

Не надо ставить как можно больше тэгов. Лучше оставить один, но конкретный, с которым проблема.
См.п.3.1 Регламента.

Answer 1

[Artem Butko]

Один из простых способов реализации "на коленке"

<div class="title">
      <div class="title-word">Harmony</div>
      <div class="title-word">Readers</div>
</div>

.title {
  display: flex;
  width: 200px;
}

.title-word:first-letter {
  color: red;
  font-size: 10px;
}

.title-word {
  font-size: 0;
  transition: all 0.5s;
}

.title:hover .title-word {
  font-size: 10px;
}