CODEWITHSUNDEEP
csscss-animations
Arty
Arty

Reputation: 355

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

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

Because the word is centered, and because all the letters are placed between each other, we can see a movement of the letters from the center to the left and the opposite when the word disappear. How to make sure that it doesn't happend? I tried to use a fixed width, but it's not possible as some letters are wider than some others and it will overlap or create gaps between letters.

In red, the word before it disappear and in black the animation played. This is what I could achieved and what I'm trying to achieve.

enter image description here

Upvotes: 1

Views: 98

Answers (1)

James
James

Reputation: 631

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

Upvotes: 1

Related Questions