Typing Effect Animation CSS3

In this week's tutorial, I'll be showing you how to code a cool CSS3 typing animation effect. This really cool typewriting effect was inspired by the creativity of Lea Verous and Rus James.


First, we’re going to code the container and then we’ll code two paragraphs for our typewriter effect. Feel free to get creative with what sentences you want to have typed out.


The CSS for the typewriter effect is simple. The usual body and container elements are styled first. Then, we’re going to give the paragraph tags some style with the help of Google Fonts and various CSS properties. Make sure that you use a monospaced font so that every character has the same width.

There are a couple of animations that make up the typewriting effect; the typewriter animation and the blinking of the cursor. The type effect is executed by the animation and @keyframes type and @keyframes type2 properties.

The animation for the cursor is executed by the use of the @keyframes blink and the animation property applied to the span tag.

Comment Below

Feel free to share a screenshot of what you’ve made using this tutorial in the comments section below! Have any questions or comments? Let’s chat in the comment below!

Marisa Blair is a front-end web developer and graphic designer based in Toronto. When she's not writing for her blog xopixel.com, she's making design & tech videos for her YouTube channel.

Leave a Reply

Your email address will not be published. Required fields are marked *