Create an eye-catching animated typing effect for your website.
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.
For other easy ways of creating decent web design, try an excellent website builder tool, or a top web hosting service. Or, read on to find out how to achieve this animation on your own site.
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.
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.
<div class="typing">
<h1>Put your title here...</h1>
</div>
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.
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.
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.
Get top Black Friday deals sent straight to your inbox: Sign up now!
We curate the best offers on creative kit and give our expert recommendations to save you time this Black Friday. Upgrade your setup for less with Creative Bloq.
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.
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.
Leon is a freelance web developer and trainer who assists web developers in creating efficient code for projects. He has worked on front-end and server-side web applications, having taught himself to code using an Amstrad computer in the 1990s. Leon has written an extensive selection of tutorials on web design for Web Designer Magazine and .Net, as well as introductions to programming concepts for beginners.
