Creating a Typing Animation with CSS: Display Text as if It's Being Typed Out in Real-Time Creating a Typing Animation with CSS: Display Text as if It's Being Typed Out in Real-Time

In today's digital age, creating engaging and interactive user experiences is key. One way to captivate your audience is by incorporating dynamic elements, such as a typing animation, into your website. In this tutorial, we'll explore how to achieve a typing effect using CSS, making your text appear as if it's being typed out in real-time.

Let's get started!

Step 1: HTML Structure

To begin, let's set up a basic HTML structure for our typing animation. We'll use a `div` element to contain the text that will be animated. Here's an example:

<div class="typing-animation">
<span class="text"></span>

Step 2: CSS Styling

Now that we have our HTML structure in place, let's move on to the CSS styling. We'll use CSS keyframes and animations to achieve the typing effect. Here's the CSS code:

.typing-animation {
font-family: Arial, sans-serif;
font-size: 18px;
overflow: hidden;
border-right: 0.15em solid #000; /* Adjust the color and thickness of the cursor */
white-space: nowrap;
margin: 0 auto;
@keyframes typing {
from { width: 0 }
to { width: 100% }
.text {
display: inline-block;
animation: typing 2s steps(40, end);


- We start by styling the container element with a desired font, font-size, and a border on the right side to serve as the cursor.

- The `typing` keyframe animation defines the width of the text from 0% to 100%.

- The `text` class sets the display property to `inline-block` to prevent line breaks and applies the `typing` animation, with a duration of 2 seconds and 40 steps to create a smooth typing effect.

Step 3: JavaScript (Optional)

Although the typing animation can be achieved purely with CSS, you may want to use JavaScript to dynamically update the text being displayed. Here's a simple JavaScript code snippet that updates the text after a delay:

const textElement = document.querySelector('.text');
const words = ['Hello', 'World!', 'Welcome', 'to', 'my', 'website!'];
let wordIndex = 0;
function typeNextWord() {
textElement.textContent = words[wordIndex];
wordIndex = (wordIndex + 1) % words.length;
setTimeout(typeNextWord, 2000); // Delay between word changes (in milliseconds)


- We first select the `.text` element using `document.querySelector()`.

- Next, we define an array of words that we want to display in the typing animation.

- The `typeNextWord` function updates the `textContent` of the `.text` element with the next word from the array, and increments the `wordIndex` to cycle through the words.

- Lastly, we use `setTimeout` to call the `typeNextWord` function with a delay of 2000 milliseconds (2 seconds) between word changes. Adjust this value according to your preference.

By following the steps outlined in this tutorial, you can easily create a typing animation using CSS. Whether you want to add flair to your website's introductory section or make your call-to-action text more engaging, the typing effect brings a touch of interactivity and dynamism to your content. Experiment with different variations and tailor the animation to suit your website's design and purpose.

Remember, combining CSS animations with JavaScript opens up endless possibilities for creating captivating user experiences. Have fun exploring and innovating with your newfound knowledge!

That wraps up our tutorial on creating a typing animation using CSS. We hope you found this article helpful. Happy coding!

Published on Jun 4, 2023

Tags: The Ultimate CSS Tutorial for Beginner Programmers

Related Posts

Did you enjoy this article? If you did here are some more articles that I thought you will enjoy as they are very similar to the article that you just finished reading.


Learn how to code in HTML, CSS, JavaScript, Python, Ruby, PHP, Java, C#, SQL, and more.

No matter the programming language you're looking to learn, I've hopefully compiled an incredible set of tutorials for you to learn; whether you are beginner or an expert, there is something for everyone to learn. Each topic I go in-depth and provide many examples throughout. I can't wait for you to dig in and improve your skillset with any of the tutorials below.