Resize letter by letter a word but keeping the padding between the letters-CodePudding

I want to make an in and out animation to show a username letter by letter. Each letter is resized after another. The anchor of the whole word should be in the middle, but each letter should be where it will be once the whole word has appeared.

Here is where I am at the moment:

HTML

<div id="username">
  <span  style="animation-delay:0s, 3s">U</span>
  <span  style="animation-delay:0.1s, 3.1s">S</span>
  <span  style="animation-delay:0.2s, 3.2s">E</span>
  <span  style="animation-delay:0.3s, 3.3s">R</span>
  <span  style="animation-delay:0.4s, 3.4s">N</span>
  <span  style="animation-delay:0.5s, 3.5s">A</span>
  <span  style="animation-delay:0.6s, 3.6s">M</span>
  <span  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

CodePudding user response：

Animate scale instead of 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  style="animation-delay:0s, 3s">U</span>
  <span  style="animation-delay:0.1s, 3.1s">S</span>
  <span  style="animation-delay:0.2s, 3.2s">E</span>
  <span  style="animation-delay:0.3s, 3.3s">R</span>
  <span  style="animation-delay:0.4s, 3.4s">N</span>
  <span  style="animation-delay:0.5s, 3.5s">A</span>
  <span  style="animation-delay:0.6s, 3.6s">M</span>
  <span  style="animation-delay:0.7s, 3.7s">E</span>
</div>