Sometimes you would like to have a nice and cool text animation like a typewriter text animation which makes it looks like a hacker type of things. You can include this type of animation in your portfolio to show off or even on your business landing page. It just makes it looks elegant.
So we will go through the steps of creating a typewriter Text Animation in Pure CSS and HTML no javascript will be included.
So we will try to create the text Animation in Pure CSS.
You can take a look at the Sandbox.
We simply making the Html and Body tags takes the full width and height. And a Dark background to make it look perfect.
html {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
width: 100%;
height: 100%;
font-family: "Anonymous Pro", sans-serif;
background-color: #111518;
}
The text container will have a special font to make it look more like a typewriter animation.
@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro);
The Anonymous Pro font will do the job.
For the text that needs to apply the animation we can use a div or either p as a container for the text I would prefer a div cause it gives you much better control over the style.
.typewriter-text {
overflow: hidden;
position: relative;
width: 18em;
border-right: 2px solid rgba(255, 255, 255, 0.75);
font-size: 38px;
white-space: nowrap;
animation: typewriter 4s steps(44) 1s 1 normal both,
blinkTextCursor 400ms steps(44) infinite normal;
}
Make sure to make the overflow hidden to hide anything outside it’s bounding box so we won’t have the text showing outside it’s bounding box.
The white-space no-wrap allows us to display the text in a single line even though it’s parent container doesn’t fit so we could easily apply the typewriter animation.
we also create a white semi-transparent border-right for the blinking cursor effect.
Finally, we apply the intended animation in this case we need two animations to make it look like a typing text animation.
@keyframes typewriter {
from {
width: 0;
}
to {
width: 18em;
}
}
@keyframes blinkTextCursor {
from {
border-right-color: rgba(255, 255, 255, 0.75);
}
to {
border-right-color: transparent;
}
}
For the typewriter keyframes, we move from 0 widths which means the text is going to be completely hidden then it starts showing till it reaches the text full-width 18em. Well this depends on the length of your text so adjust the width value to match your text
s length to make the animation perfect.
For the blinkTextCursor keyframes, we show it at first as completely white and then completely hide it that’s how it plays the blinking cursor just by tweaking the border-right property.
The most important part is using steps function as an animation-timing-function which allows us to create several intervals for the animation each interval plays separately that’s how we can create the typing effect.
Read more about animation-timing-function and steps function at Mozilla Developer.
Lastly, we apply the animation to the text container using the shorthand animation property cause in this case we need to apply two animations at the time to the same element.
.typewriter-text {
...
animation: typewriter 4s steps(44) 1s 1 normal both,
blinkTextCursor 400ms steps(44) infinite normal;
}
The shorthand animation property has the same meaning as the following properties in-order:
#css #html #web-development