But notice how it doesn't feel like typing. You can tell you're just stretching the width. That doesn't really look like anyone is typing. So here's a neat trick that I bet you don't know. We can take an animation and split it into little segments or steps. So here's what we can do. I can call steps here. And I'm going to give it 28. And then I will explain what that stands for. But take a look.

So what I want to do is not display this until this is done animating. Now, we could move over to the CSS and start writing. But just like when writing php, where I talk about use the API that you wish you had. So interact with it, and then you write the code to make that work. The same is going to be true, of course, for just about anything. So in our case, what do I want to do here? Well, if the animation takes two seconds, we're going to move this to two. If this animation takes two seconds, I want to say, fade this in, but wait two seconds before starting. Okay, keywords, fade in, wait.

fade this in, but wait two seconds before starting. Okay, keywords, fade in, wait. What if we tried this? Class, fade in, wait two seconds. Really clean, really simple. Okay, now let's make that work. So I'm going to comment this out temporarily. Obviously, it doesn't work yet. So we now have a new class. We'll put it down here.

So we now have a new class. We'll put it down here. fadeIn. So how do you fade something in? You change its opacity from 0 to 1. So let's start with an opacity of 0. And then we'll say keyframes, fadeIn, and we'll say to an opacity of 1. However, we also have to set the initial opacity. However, in this case, we would have to set from, or we could set animation-fill-mode to both.

We'll put that on the fadeIn class. Okay, so now we could say, if we bring this back, class fadeIn. But let's have that one wait three seconds. And this is a nice way to go about it. There are libraries like animate.css, and then JavaScript libraries on top of that, that will register where you are on the page, and when you pull up a section, and when the animation should begin, and stuff like that. All very cool. But if you want something really lightweight and very simple, this is nice to use. So we're going to wait three seconds in this case.