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

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>
</div>

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);
}

Explanation:

- 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)
}
typeNextWord();

Explanation:

- 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