CSS Animation

HTML & CSS
1

I am playing around with animations and I am attempting a text typing animation.

HTML:

<p class=“test1”>This is test line 1</p>
<p class=“test1”>This is test line 2</p>
<p class=“test1”>This is test line 3</p>
<p class=“test1”>This is test line 4</p>
<p class=“test1”>This is test line 5</p>
<p class=“test1”>This is test line 6<span>|</span></p>

CSS:

p.test1{
color: black;
font-family: “Courier”;
font-size:2em;
font-weight:bold;
line-height:.8em;
margin-top:4%;
/margin: 10px 0 0 10px;/
white-space: nowrap;
overflow: hidden;
width: 30em;
animation: type 4s steps(18, end);
}

p.test1:nth-child(2){
animation: type2 8s steps(18, end);
}

p.test1:nth-child(3){
animation: type3 16s steps(18, end);
}
p.test1:nth-child(4){
animation: type4 24s steps(18, end);
}
p.test1:nth-child(5){
animation: type5 30s steps(18, end);
}
p.test1:nth-child(6){
animation: type6 40s steps(18, end);
}

p.test1 a{
color: black;
text-decoration: none;
}

span{
animation: blink 1s infinite;
}

@keyframes type{
from { width: 0; }
}

@keyframes type2{
0%{width: 0;}
50%{width: 0;}
100%{ width: 100; }
}

@keyframes type3{
0%{width: 0;}
50%{width: 0;}
100%{ width: 100; }
}

@keyframes type4{
0%{width: 0;}
50%{width: 0;}
100%{ width: 100; }
}

@keyframes type5{
0%{width: 0;}
50%{width: 0;}
100%{ width: 100; }
}

@keyframes type6{
0%{width: 0;}
50%{width: 0;}
100%{ width: 100; }
}

@keyframes blink{
to{opacity: .0;}
}

::selection{
background: black;
}

The above is an animation types out six separate lines of text. I want each line to type out at the same speed but each line initiate in succession. As I increase the number of seconds for each line I can get the subsequent line to initiate after the previous line is complete, but each subsequent line then types at a slower pace then the previous. By the time I am at the last line it is typing at a snails pace. I am in a catch 22. If I decrease the seconds on each line the pace increases, but it initiates before the previous line is complete and vice versa. If this explanation makes sense, does anyone have an advice how I can get this to work?

Thank you!

2

I believe my number of steps should be 108 not 18. Typo.

3

HI,

Couldn’t you simplify it with an animation delay.

e.g.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
p.test1 {
	color: black;
	font-family: "Courier";
	font-size:2em;
	font-weight:bold;
	line-height:.8em;
	margin-top:4%;
	/*margin: 10px 0 0 10px;*/
white-space: nowrap;
	overflow: hidden;
	width: 0em;
	animation: type 4s steps(108, end);
	animation-fill-mode: forwards;
}
p.test1:nth-child(2) { animation-delay: 3s; }
p.test1:nth-child(3) { animation-delay: 6s; }
p.test1:nth-child(4) { animation-delay: 9s; }
p.test1:nth-child(5) { animation-delay: 12s; }
p.test1:nth-child(6) { animation-delay: 15s; }
p.test1 a {
	color: black;
	text-decoration: none;
}
span { animation: blink 1s infinite; }
 @keyframes type {
		0% {width: 0;}
	50% {width: 0;}
	100%{width: 30em;}
}
}
 @keyframes blink { to {opacity: .0;}}
::selection { background: black; }
</style>
</head>

<body>
<p class="test1">This is test line 1</p>
<p class="test1">This is test line 2</p>
<p class="test1">This is test line 3</p>
<p class="test1">This is test line 4</p>
<p class="test1">This is test line 5</p>
<p class="test1">This is test line 6<span>|</span></p>
</body>
</html>

You will have to add the delay for each line manually if you have more items so if the amount of lines are unknown then you may need to initiate the effect with js.

(You will have to add the webkit syntax of course.)

4

That did it! I knew I needed an animation delay but I wasn’t sure how to structure it. Thank you very much!