Auto Typing Text - *It's too slow*

I am trying to replicate a computer typing out a message. I would like to make it uniform but everytime i adjust my code the end result is less then satisfactory. By the time it makes its way down a few lines it becomes dreadfully slow. Suggestions? I am by all means not a professional coder and i am trying to learn as much as i can as i go but this one has me stumped for too long. Maybe there is a better way for me to do this?

Test Address: Test Page

It appears you are increasing the animation duration for each <p> so they will get progressively slower.

  animation: type 4s steps(60, end); 

  animation: type2 8s steps(60, end);

  animation: type2 12s steps(60, end);
  animation: type2 17s steps(60, end);
  animation: type2 26s steps(60, end);
  animation: type2 32s steps(60, end);
  animation: type2 40s steps(60, end);
  animation: type2 48s steps(60, end);

Try and make the durations the same and use a delay to make them follow one another.


Yes as Sam said keep the duration the same but delay the start of each one.

Something like this:

p {
	color: lime;
	font-family: "Courier";
	font-size: 12px;
	margin: 10px 0 0 10px;
	white-space: nowrap;
	overflow: hidden;
	width: 30em;
	animation: type 4s steps(60, end);
p + p {width:0;	animation: type2 8s steps(60, end) forwards;}
p:nth-child(2) {animation-delay:0s}
p:nth-child(3) {animation-delay:2s;}
p:nth-child(4) {animation-delay:4s;}
p:nth-child(5) {animation-delay:6s;}
p:nth-child(6) {animation-delay:8s;}
p:nth-child(7) {animation-delay:10s;}
p:nth-child(8) {animation-delay:12s;}

Fiddle with the timings to match the speed and the length of text etc.


This scrolling method may be suitable for your site.

1 Like

You could probably manage without some of the vendor prefixes too, now, John.

1 Like

Would removing some of the vendor prefixes create problems with anyone using an old browser?

It all depends on how old is old…

1 Like

Yes, and hopefully goad them into updating their browser.
I think webkit is the only extension you may want to hang on to for animation currently.


If you use a monface font and set the length in ch units you can get a better effect but you have to know the character count beforehand.

1 Like

That only works for me in Chrome. FF and IE11 just give a blank screen.

Yes you’d have to hard code the ‘calc’ rule in the animation.

e.g. change calc(.1s * 19) to 1.9s

I was just too lazy to work it out :slight_smile:



Late to the party and a bit off-topic, but I thought you might enjoy a different way of handling the Samsung monitor frame. The frame in this code hugs the edges of the user’s monitor at all widths. The thickness of the border-image does not change at different widths. The “Samsung” logo is added separately so it does not resize at different widths.

I added some of your test content “just for fun”. Your animated control deck .gif is by far the heaviest thing in the ship.

Catch? Uses “pointer-events:none”.

Slice and dice at will. :lol: (2.0 MB)


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.