How to create an animated typing effect

When used well, CSS animation can add interest and personality to your site. In this article, we'll walk through how to create an animated effect that will make your typography appear gradually, as if it were being typed on a typewriter. You can see an example of the animation in action on the site for Crypton, a cryptocurrency trading bot. The effect is impressive and it's easy to implement, too. Read on to find out how to achieve this animation on your own site.

Explore the new frontier of CSS animation

01. Document initiation

The first step is to initiate the structure of the webpage. This consists of the HTML container responsible for storing the head and body sections. While the head section's main responsibility is to load the external CSS, the body section will store the HTML content created in step 2.

02. HTML content

The HTML content consists of a container that uses the 'typing' class. This will be used by the CSS to apply the typing effect to any child elements. The child content element is made from a h1 tag, but you could use another element such as 'p' to create the element as a paragraph.

03. CSS initiation

Create a file called 'styles.css'. The first step of the CSS defines the document and body containers to cover the full browser window without any visible border spacing. The default colours for the black page background and white text colours are also set in this step. Content elements within the page will inherit the colour set in this step as their default colour.

04. Typing children

All children within the typing container are set to display over one line without the use of text wrapping. Most importantly, these child elements have the 'typing' animation applied to them. This animation is set to play over five seconds with 50 frame snapshots – allowing for the staggered typing effect.

05. Face eyes

The effect is also accompanied by an animated face that appears to narrate the typed text. This step creates the eyes of this face as a CSS 'virtual' element using the after selector. The eyes are placed relative to the parent text, with its content set as two dot text characters.

06. Face mouth

Like with the eyes, the face's mouth is made from a CSS virtual element – this time using the before selector. The mouth is positioned in relation to the parent text element, as well as having a border radius to appear with a rounded shape.

The typingSpeak animation is applied; it will last for 0.5 seconds using two frames of animation. With the animation being repeated five times, the total animation time will be 2.5 seconds.

07. Animation definitions

This step defines the animations referenced by elements created in previous steps. The typingAnim animation that has been used for the typing effect changes its element from no width to full width. The typingSpeak animation used for the face's mouth changes its element from appearing flat to more open.

This article was originally published in issue 275 of creative web design magazine Web Designer. Buy issue 275 here or subscribe to Web Designer here.

Related articles: