Typewriter animation issue

Question

I trying to add a css-only typewriting animation. The starting letter should always be displayed and a word should appear. I using the method of using span in combination with display: inline-block;, overflow-hidden and keyframes.

However giving a span the value inline-block; will cause the span to shift upwards on top of the baseline.

I already thought about countering it with a negative margin/padding but I see issues with full responsivness in mind where I dont actually know the line heightor the baseline.

So I need help to fix that issue by either fixing the vertical shifting to the baseline or by solving the animation in a different way (css)

body {
  background-color: blue;
  margin: 20px;
}

h1 {
  color: yellow;
}

span {
  color: white;
}

h1:nth-child(1) span {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  animation: typewriter;
  animation-duration: 5s;
  animation-timing-function: steps(40, end);
}

@keyframes typewriter {
    from {
      width: 0;
    }
    to {
      width: 100%;
    }
}

<h1>A<span>lpha</span></h1>
<h1>B<span>ravo</span></h1>
<h1>C<span>harlie</span></h1>
<h1>D<span>elta</span></h1>

vertical-align: top; to span – Temani Afif Jan 17 '21 at 08:01 — Temani Afif, Jan 17 '21 at 08:01

score 1 · Accepted Answer · answered Jan 17 '21 at 04:41

Adding display: flex to the h1 styling seems to have fixed the alignment issue, getting rid of the shift upwards. This way you don't have to use a negative margin or padding to counter the misalignment.

body {
  background-color: blue;
  margin: 20px;
}

h1 {
  color: yellow;
  display: flex;
}

span {
  color: white;
}

h1:nth-child(1) span {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  animation: typewriter;
  animation-duration: 5s;
  animation-timing-function: steps(40, end);
}

@keyframes typewriter {
    from {
      width: 0;
    }
    to {
      width: 100%;
    }
}

<h1>A<span>lpha</span></h1>
<h1>B<span>ravo</span></h1>
<h1>C<span>harlie</span></h1>
<h1>D<span>elta</span></h1>

Typewriter animation issue

1 Answers1