Boost Engagement on Your Website with This Easy CSS Typing Animation Tutorial

As a web designer, you‘re always looking for ways to make your sites stand out and keep visitors engaged. One popular technique that can help achieve this is a typing animation effect. By making your text appear as if it‘s being typed out right before the user‘s eyes, you can add a dynamic, interactive element that grabs attention and entices people to keep reading.

In this step-by-step tutorial, we‘ll walk through exactly how to create a typing animation with pure CSS. No JavaScript or fancy libraries required! By the end, you‘ll be able to add this impressive effect to your own sites and reap the rewards of higher engagement.

Why Use a CSS Typing Animation?

Before we dive into the code, let‘s look at some of the benefits of incorporating typing animations into your web design:

  1. Grab attention – In a world of short attention spans, anything you can do to visually grab your users‘ interest is crucial. The subtle movement of a typing animation is a great way to make them pause and take notice of your content.

  2. Boost time on page – Once you have their attention, you need to keep it. Revealing your content gradually with a typing effect can entice users to stay on the page longer as they wait to read the full message. This increased "dwell time" signals to search engines that your content is valuable.

  3. Guide your users – Animations provide a sense of direction and hierarchy. Leading with a typing headline, for instance, directs users where to start reading and creates a logical narrative flow.

  4. Add a professional touch – When executed well, subtle animations make your site appear higher-end and more considered. This helps to build credibility and trust with your audience.

  5. Stand out from the crowd – At a time when many websites look the same, a thoughtful animation can set you apart from competitors and make your brand more memorable. Just a simple typing effect shows users that you‘ve put care into the details.

Need convincing? The numbers speak for themselves:

  • Websites with animations have a 20% lower bounce rate and 13% higher conversion rate than those without. (Source: WowMakers)

  • Adding a simple animation to a call-to-action button can boost clicks by 30%! (Source: QuickSprout)

  • People will stay on a web page with animations for twice as long – 40 seconds compared to 20 seconds on static pages. (Source: TechWyse)

As you can see, when used thoughtfully, animations are a powerful tool for creating engaging user experiences that drive meaningful results for your website. So let‘s create our own!

Step-by-Step CSS Typing Animation Tutorial

Step 1: Create your HTML structure

The first step is to set up a basic HTML structure to hold your text. We‘ll wrap the text in a <div> element with a class so we can target it with our CSS later.

<div class="typing-text">
  <p>This is the text that will be typed out!</p>
</div>

We‘re using a <p> tag here, but you could use any text element like a heading, span, or blockquote. Also note the descriptive class name typing-text – it‘s always a good idea to use semantic names so your code is more readable.

Step 2: Hide the text initially with CSS

Next, we need to set up our text element so that the text is hidden by default, before the animation begins:

.typing-text p {
  font-size: 2rem;
  overflow: hidden;
  white-space: nowrap;
  width: 0;  
}

Here‘s what each of these properties does:

  • font-size: 2rem – Sets our base text size. Adjust this to suit your design.
  • overflow: hidden – Hides any text that exceeds the width of the element. This is key to the "typing" illusion.
  • white-space: nowrap – Prevents the text from wrapping to a new line, so it stays as one long line.
  • width: 0 – Sets the initial width to 0 so the text is completely hidden. The animation will expand this to reveal the text.

At this stage, you won‘t see any text because the width is 0! But don‘t worry, the magic of CSS will gradually reveal it in the next steps.

Step 3: Define a typing keyframe animation

Time for the fun part – creating the actual typing effect! For this, we‘ll use CSS @keyframes to define an animation.

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

In this code block, we‘re defining a keyframe animation called "typing". A keyframe is essentially a way to define the start and end states of an animation.

  • from sets the initial state – in this case, the width of the text is 0.
  • to defines the end state, where the width expands to 100% to make the full text visible.

Basically, this animation tells the browser to steadily expand the width of the text element from 0 to 100% over a set duration (which we‘ll specify in the next step). This creates the illusion of the text being "typed out" onto the screen!

Step 4: Apply the animation

Our typing animation is defined, but we‘re not actually using it yet. Let‘s change that by applying the animation to our text element:

.typing-text p {
  /* ... previous styles */
  animation: typing 3.5s steps(40, end);
}

There‘s a lot going on in this one line of code! Let‘s break it down:

  • animation is a shorthand property for defining our animation.
  • typing refers to the name of the @keyframes animation we created in step 3.
  • 3.5s sets the duration of the animation to 3.5 seconds. Adjust this based on the length of your text – a good rule of thumb is 1 second per 10 characters.
  • steps(40, end) is where the real magic happens! Instead of animating smoothly from 0 to 100% width, this function breaks the animation into 40 equal "steps". This creates the illusion of characters being typed one by one. Play with the number of steps to adjust the smoothness and speed.

Et voilà! If you preview your code now, you should see your text being typed out. Give yourself a pat on the back – the hardest part is done!

Step 5: Add a blinking cursor effect

To really sell the typing effect, let‘s add one more detail – a blinking cursor at the end of the text, just like a real cursor in a text editor. We can create this using a pseudo-element:

.typing-text p::after {
  content: "|";
  margin-left: 5px;
  animation: blink 0.7s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1 }
  50% { opacity: 0 }
}

Here‘s how this code works:

  • ::after is a special selector that lets us add content after the text element
  • We set the content to a pipe character (|) to mimic a cursor.
  • margin-left: 5px adds some spacing between the "cursor" and text.
  • We apply another animation called blink to make the cursor flash on and off.
  • The blink keyframe alternates the opacity from 1 to 0 to create the blinking effect. The animation repeats infinitely every 0.7 seconds.

And there you have it! A complete typing animation effect with a blinking cursor, all with just a few lines of CSS.

Optimizing and Customizing Your Typing Animation

While the code we‘ve written so far will get the job done, there are a few more things we can do to really make our typing animation shine.

Adjust speed based on text length

In our example, we set the animation duration to a fixed 3.5 seconds. But in the real world, you might have text of varying lengths. To keep the typing speed consistent and not too fast or slow, you can use a CSS variable to dynamically calculate the duration based on the number of characters.

.typing-text p {
  --characters: 36;
  --duration: calc(var(--characters) * 0.1s);

  animation: typing var(--duration) steps(var(--characters), end);
}

Now the duration will always be 0.1 seconds multiplied by the number of characters. So for a 50 character text, the animation would last 5 seconds. Tweak the multiplier to adjust the speed to your liking.

Get creative with style and layout

Our basic example uses a single white text on a black background. But the sky‘s the limit for customizing the look and feel of your typing animation. A few ideas:

  • Use brand colors for text and cursor
  • Pair with background animations like gradients or particles
  • Combine with illustrations or images
  • Animate multiple text elements with different speeds and delays
  • Try different cursors like underscore, emojis, or custom characters

The key is to get creative and have fun exploring the possibilities! Just make sure your animations always serve to complement your content, not distract from it.

Improve accessibility

It‘s important our animations are inclusive of all users, including those with visual impairments or vestibular disorders. A few tips:

  • Add role="status" and aria-live="polite" to your text container to alert screen readers of the updating text.
  • Make sure color contrast is high enough for low vision users.
  • Reduce the motion for users who prefer that. You can use the prefers-reduced-motion media query to provide an alternative experience without animation.
@media (prefers-reduced-motion) {
  .typing-text p {
    animation: none;
    width: auto;
  }
}

Trigger on scroll for better performance

If your typing animation is below the fold of the page, there‘s no need for it to start right away. In fact, running animations offscreen can harm performance and battery life on mobile devices.

A better approach is to use JavaScript to trigger the animation when the text is scrolled into view. There are many ways to do this such as Intersection Observer or scroll event listeners. Here‘s a simple example:

const typingText = document.querySelector(".typing-text");

window.addEventListener("scroll", () => {
  if (isInViewport(typingText)) {
    typingText.classList.add("start");
  }
});

function isInViewport(el) {
  const rect = el.getBoundingClientRect();
  return rect.top >= 0 && rect.left >= 0 && rect.bottom <= window.innerHeight && rect.right <= window.innerWidth;
}

Then in your CSS, only apply the animation when the start class is added:

.typing-text p {
  /* ... */
  animation: none;
}

.typing-text.start p {
  animation: typing var(--duration) steps(var(--characters), end);
}

This way, the animation will only begin when the user has scrolled the text into view, providing a much smoother experience.

Browser support and fallbacks

CSS animations and the properties used in this tutorial have excellent browser support, working in all modern browsers and IE10+. However, it‘s always a good idea to provide fallbacks and test thoroughly.

For older browsers that don‘t support @keyframes, the text will simply show without the animation. If the animation is crucial to the experience, you could reach for a JavaScript solution as a fallback.

Also note that some of the newer features we used like CSS variables won‘t work in IE11 and below. Make sure to provide suitable fallbacks for your target browsers.

Measuring the impact

So you‘ve implemented your shiny new typing animation – great work! But how do you know if it‘s actually making a difference for your site? Tracking real data will give you valuable insights.

Some metrics to monitor:

  • Time on page – Are people viewing the page longer than before the animation? Longer visits suggest the content is resonating.
  • Scroll depth – Are users scrolling further down the page? The animation may be enticing them to keep reading.
  • Engagement – Look for increased clicks, shares, comments, and conversions. Are people interacting with your site more?
  • User feedback – Ask your visitors what they think! Qualitative feedback can give you ideas for improving the animation.

Remember, the goal of animation is to enhance the user experience, not distract from it. Always track the data to ensure your animations are having the intended effect.

Conclusion

Congratulations, you now have a professional typing animation effect to add some flair to your websites! In this tutorial, we‘ve covered:

  • Why typing animations are a powerful engagement tactic
  • Step-by-step instructions to create the effect with HTML and CSS
  • Tips for optimizing the animation and improving the user experience
  • Measuring the real-world impact of your animations

I hope you‘ve found this guide helpful and feel empowered to start using typing animations in your own web designs. The code snippets I‘ve provided are free for you to use and build upon.

While we‘ve focused on a typing effect in this post, the same concepts of CSS @keyframes and animation properties can be used to create all sorts of engaging effects. I encourage you to explore and experiment!

If you have any questions or insights to share, please leave a comment below. I‘d love to see what typing animations you come up with.

Happy coding!

Similar Posts