一个字一个字地调整大小，但保持字母之间的填充

Question

我想制作一个进出动画来逐个字母地显示用户名。每个字母一个接一个地调整大小。整个单词的锚点应该在中间，但是每个字母应该在整个单词出现后的位置。

这是我现在所在的位置：

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/

因为这个词是居中的，而且因为所有的字母都放在彼此之间，所以当这个词消失时，我们可以看到字母从中心向左和相反的方向移动。如何确保它不会发生？我尝试使用固定宽度，但这是不可能的，因为有些字母比其他字母宽，它会重叠或在字母之间产生间隙。

红色表示前面的单词消失，黑色表示动画播放。这就是我所能达到的，也是我正在努力达到的。

Answer 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>

一个字一个字地调整大小，但保持字母之间的填充

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

css

css-animations