Typewriter Text Effect: Animate Your Website Content with CSS

Creating a typing animation effect on your website can add an engaging and dynamic touch to your content, making it more interactive and visually appealing to your visitors. Typing animation is a visual effect that simulates text being typed onto the screen, character by character, as if someone is typing in real-time. This effect can be used for various purposes, such as drawing attention to important messages, enhancing storytelling on your website, or just adding a fun, interactive element to your pages.

This blog post will guide you through the process of creating a typing animation using CSS, providing you with a simple, step-by-step approach to integrate this cool effect into your web projects.

Step1: Setting Up the HTML Structure

This HTML code creates a simple web page displaying two paragraphs of text, demonstrating the foundational elements of an HTML document, including doctype declaration, the html root element, and body containing paragraph (p) elements for text content.

<!DOCTYPE html>
<html>
<body>
<p>Hello</p>
<p>Your amazing text goes here!
</p>
</body>
</html>

Step2: Animating the Text Reveal

This CSS code applies a dark background to a webpage, animates text to simulate typing with two distinct timings for different paragraphs, introduces a blinking cursor effect, and customizes text and link styles for visual contrast. It uses @keyframes for animation, demonstrating advanced CSS techniques for engaging web design.

body{
background: #000;
padding-top: 10px;
}

p{
color: lime;
font-family: "Courier";
font-size: 20px;
margin: 10px 0 0 10px;
white-space: nowrap;
overflow: hidden;
width: 30em;
animation: type 4s steps(60, end);
}

p:nth-child(2){
animation: type2 8s steps(60, end);
}

p a{
color: lime;
text-decoration: none;
}

span{
animation: blink 1s infinite;
}

@keyframes type{
from { width: 0; }
}

@keyframes type2{
0%{width: 0;}
50%{width: 0;}
100%{ width: 100; }
}

@keyframes blink{
to{opacity: .0;}
}

::selection{
background: black;
}