Измените размер буква за буквой слова, но сохраняя отступы между буквами

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

Вот где я на данный момент:

HTML

<div id = "username">
  <span class = "animate-username-letter" style = "animation-delay:0s, 3s">U</span>
  <span class = "animate-username-letter" style = "animation-delay:0.1s, 3.1s">S</span>
  <span class = "animate-username-letter" style = "animation-delay:0.2s, 3.2s">E</span>
  <span class = "animate-username-letter" style = "animation-delay:0.3s, 3.3s">R</span>
  <span class = "animate-username-letter" style = "animation-delay:0.4s, 3.4s">N</span>
  <span class = "animate-username-letter" style = "animation-delay:0.5s, 3.5s">A</span>
  <span class = "animate-username-letter" style = "animation-delay:0.6s, 3.6s">M</span>
  <span class = "animate-username-letter" style = "animation-delay:0.7s, 3.7s">E</span>
</div>

CSS

#username {
  text-align: center;
}

.animate-username-letter {
  font-family: Tahoma;
  display: inline-block;
  white-space: nowrap;
  font-size: 50px;
  animation: forwards;
  animation-name: animate-username-in, animate-username-out;
  animation-delay: 2s, 6s;
  animation-duration: 0.10s;
}

@keyframes animate-username-in {
  from {
    font-size: 0px;
  }
  to {
      font-size: 50px;
  }
}

@keyframes animate-username-out {
  from {
      font-size: 50px;
  }
  to {
    font-size: 0px;
  }
}

JSFIDDLE

https://jsfiddle.net/zc5u1tmk/2/

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

Красным цветом слово перед ним исчезает, а черным воспроизводится анимация. Это то, чего я смог достичь и чего я пытаюсь достичь.

Измените размер буква за буквой слова, но сохраняя отступы между буквами

Считаете ли вы моноширинный шрифт?

Paulie_D 17.03.2022 17:00

Я думал об этом, но нет

Takah 17.03.2022 17:02

Может быть, решение состоит в том, чтобы обернуть каждую букву одной и той же буквой с прозрачностью и без анимации, а затем перекрыть родителя дочерним элементом?

Takah 17.03.2022 17:03
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
1
3
40
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Анимируйте scale вместо font-size

#username {
  text-align: center;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: flex-end;
}

.animate-username-letter {
  font-family: Tahoma;
  display: inline-block;
  white-space: nowrap;
  font-size: 50px;
  animation: forwards;
  animation-name: animate-username-in, animate-username-out;
  animation-delay: 2s, 6s;
  animation-duration: 0.50s;
  text-align: center;
  transform: scale(0);
  transform-origin: bottom;
}

@keyframes animate-username-in {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

@keyframes animate-username-out {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0);
  }
}
<div id = "username">
  <span class = "animate-username-letter" style = "animation-delay:0s, 3s">U</span>
  <span class = "animate-username-letter" style = "animation-delay:0.1s, 3.1s">S</span>
  <span class = "animate-username-letter" style = "animation-delay:0.2s, 3.2s">E</span>
  <span class = "animate-username-letter" style = "animation-delay:0.3s, 3.3s">R</span>
  <span class = "animate-username-letter" style = "animation-delay:0.4s, 3.4s">N</span>
  <span class = "animate-username-letter" style = "animation-delay:0.5s, 3.5s">A</span>
  <span class = "animate-username-letter" style = "animation-delay:0.6s, 3.6s">M</span>
  <span class = "animate-username-letter" style = "animation-delay:0.7s, 3.7s">E</span>
</div>

Использование фиксированной ширины приведет к пробелам или перекрытиям, поскольку я не использую моноширинный шрифт.

Takah 17.03.2022 17:34

Обновил код и анимировал масштаб шрифтов и вместо этого установил размер шрифта.

James 17.03.2022 17:43

Удивительно ! Вы даже добавили нижний слой трансформации, который мне был нужен. Большое спасибо !

Takah 17.03.2022 17:53

Другие вопросы по теме