CODEWITHSUNDEEP
htmlcsscss-animations
Amg
Amg

Reputation: 123

Sequential text in CSS animations

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.

Upvotes: 3

Views: 601

Answers (1)

m4n0
m4n0

Reputation: 32255

Since CSS cannot detect characters, I suggest you to

  1. Wrap the lines inside a separate class autotype1, autotype2 and autotype3.
  2. Hide the other lines initially with width: 0 or opacity: 0;
  3. Use animation-delay with timing like 2n, 3n to make it sequential.
  4. 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>

Upvotes: 3

Related Questions