Sequential text in CSS animations

Question

I'm trying to create a sequential text animation. One line, then the next, then the next. But it animates all three lines at the same time.

.autotype {
  overflow: hidden;
  white-space: nowrap;
}

.autotype {
  animation: autotype 8s steps(10, end);
  animation-iteration-count: infinite;
}

@keyframes autotype {
  from {
    width: 0px;
  }
}

@keyframes autotype {
  0% {
    width: 0px;
  }
  20% {
    width: 70px;
  }
  40% {
    width: 140px;
  }
  60% {
    wdith: 210px;
  }
  80%. {
    width: 280px;
  }
  100% {
    width: 500px;
  }
}

.alignnone {
  height: 20px;
  width: 50px;
  position: relative;
  top: 4px;
}

<div class="autotype">.
  <p>Hello, and welcome to
    <img src="http://4309.co.uk/wp-  
content/uploads/2020/01/
Screenshot_20200110_150836- 
300x115.jpg" alt="" width="300" height="115" class="alignnone size-medium 
wp-image-8431" />Feel free to look</p>
  <p>around the site and contact us via the form<br> on the contact page</div>

So how do i animate it so that it reveals the first line, and only when this is fully revealed begins the second and so on. I've tried using height in the animation itself but, whilst this works for the first line, when it goes higher for the next line they've already rendered.

m4n0 · Accepted Answer · 2020-01-11 08:09:35Z

Since CSS cannot detect characters, I suggest you to

Wrap the lines inside a separate class autotype1, autotype2 and autotype3.
Hide the other lines initially with width: 0 or opacity: 0;
Use animation-delay with timing like 2n, 3n to make it sequential.
If you want to make it infinite, you might want to add a bit of JS with the help of these answers: CSS animation delay in repeating

.autotype {
  overflow: hidden;
  white-space: nowrap;
}

.autotype {
  animation: autotype 4s steps(10, end);
  animation-fill-mode: forwards;
}

.autotype2 {
  width: 0;
  animation-delay: 4s;
  margin-bottom: 0;
}

.autotype3 {
  width: 0;
  animation-delay: 8s;
  margin-top: 0;
}

@keyframes autotype {
  from {
    width: 0px;
  }
}

@keyframes autotype {
  0% {
    width: 0px;
  }
  20% {
    width: 70px;
  }
  40% {
    width: 140px;
  }
  60% {
    width: 210px;
  }
  80%. {
    width: 280px;
  }
  100% {
    width: 500px;
  }
}

.alignnone {
  height: 20px;
  width: 50px;
  position: relative;
  top: 4px;
}

<div>.
  <p class="autotype autotype1">Hello, and welcome to
    <img src="http://4309.co.uk/wp-  
content/uploads/2020/01/
Screenshot_20200110_150836- 
300x115.jpg" alt="" width="300" height="115" class="alignnone size-medium 
wp-image-8431" />Feel free to look</p>
  <p class="autotype autotype2">around the site and contact us via the form<br>
  </p>
  <p class="autotype autotype3"> on the contact page</p>
</div>

Collectives™ on Stack Overflow

Sequential text in CSS animations

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related