Как реализовать анимацию смещения текста кнопки?

Question

[schip454]

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



Также оставлю ссылку на видео с тем, как должна выглядеть анимация:
https://ru.files.fm/u/5f3f4apeg

Answer 1

[imko]

Кейфреймс
Ну примерно так на наведение уезжают вверх с середины, без наведения приезжают снизу в середину. Разве что еще чуть чуть поковыряться чтоб она при появлении не проигрывалась

Answer 2

[Михаил]

Если бы не нужно было анимировать каждый символ отдельно - можно было бы попробовать сделать через ::before и ::after, куда в правило content запихиваешь содержимое кнопки. ::before позиционируем таким образом, чтобы мы его видели в центре кнопки, а ::after за его пределами. При наведении на кнопку ::before уводишь наверх, а ::after выводишь на середину кнопки.

Если же нужно обязательно анимировать посимвольно - проделываешь тот же самый алгоритм, но уже без ::before и ::after, а делая на вложенных элементах, типа такого:

<button class="button">
  <div class="button-primary-text">
    <span class="button-symbol">D</span>
    <span class="button-symbol">O</span>
    <span class="button-symbol">N</span>
    <span class="button-symbol">A</span>
    <span class="button-symbol">T</span>
    <span class="button-symbol">E</span>
  </div>
  <div class="button-secondary-text">
    <span class="button-symbol">D</span>
    <span class="button-symbol">O</span>
    <span class="button-symbol">N</span>
    <span class="button-symbol">A</span>
    <span class="button-symbol">T</span>
    <span class="button-symbol">E</span>
  </div>
</button>

По идее стили будут несложные, через :nth-child задать некоторые задержки для символов внутри кнопки, а сам текст двигать с помощью transform: translate(...)

Возможно можно как-то и без "дублирования" кода, поигравшись как-то с transition, но, например, когда я смотрел всякие дизайнерские сайты на awwwards, то подобная анимация была сделала именно через дублирование