Thu. Jun 1st, 2023

[ANSWERED] html – Typewriter animation issue

By

Nov 19, 2022 css, html

Solution 1 :

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>

Problem :

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>

Comments

Comment posted by Temani Afif

vertical-align: top; to span

By

Related Post

[ANSWERED] How do you add a background image in the margins and top of the page behind the body? (Html, Css)

Nov 20, 2022

[ANSWERED] html – I can’t get my carousel buttons to respond bootstrap 4

Nov 20, 2022

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

Nov 20, 2022