Как создать эффект анимации для текста, который будет разъезжать при наведении на него?

Чтобы создать анимацию разъезжающегося текста, можно использовать CSS и JavaScript. 

Вот пример кода для реализации такой анимации:

HTML:
```html
<div class="text-container">
  <span class="letter">H</span>
  <span class="letter">R</span>
</div>
```

CSS:
```css
.text-container {
  position: relative;
  font-size: 48px;
}

.letter {
  display: inline-block;
  transition: left 0.5s ease-in-out, top 0.5s ease-in-out;
  position: relative;
}

.letter:hover {
  left: -10px; /* или другое значение */
  top: 10px; /* или другое значение */
}
```

JavaScript (опционально):
```javascript
// Чтобы анимация запускалась при открытии страницы
document.addEventListener("DOMContentLoaded", function() {
  var letters = document.getElementsByClassName("letter");
  
  setTimeout(function() {
    for (var i = 0; i < letters.length; i++) {
      letters[i].style.left = "-10px"; /* или другое значение */
      letters[i].style.top = "10px"; /* или другое значение */
    }
  }, 1000); // Задержка в миллисекундах перед началом анимации
});
```

Обратите внимание, что в CSS мы используем `transition` для создания плавного эффекта разъезжания при наведении на текст. В JavaScript мы также добавляем задержку перед началом анимации, чтобы она запускалась после загрузки страницы.

Вы можете настроить значения `left` и `top` в CSS и JavaScript, чтобы определить направление и величину разъезжания букв.

Совет: Используйте простой способ реализации "на коленке", чтобы создать элемент с заголовком, состоящим из двух слов, выделенных красным и анимированных при наведении курсора.

Код CSS:
```css
.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;
}
```