CSS Project: Crafting a Pure CSS Animated Custom Animated Typing Effect

Written by

FixTechToday

in

In the digital age, capturing a user’s attention is paramount. Websites are no longer static; they are dynamic, engaging experiences. One compelling way to achieve this is through animations, and among these, the typing effect stands out. It’s a subtle yet effective technique that adds a layer of interactivity and intrigue to your web content. This project will guide you through creating a pure CSS animated typing effect, perfect for beginners to intermediate web developers looking to enhance their CSS skills and add a touch of flair to their websites. We’ll break down the concepts, provide step-by-step instructions, and address common pitfalls to ensure you can implement this effect seamlessly.

Why a Typing Effect?

The typing effect, simulating text appearing character by character, is more than just a visual gimmick. It serves several practical purposes:

  • Adds Personality: It injects a sense of personality and dynamism into your website, making it feel less robotic and more human.
  • Enhances Engagement: It draws the user’s eye and encourages them to read the content, particularly for headlines, introductions, or calls to action.
  • Conveys Information: It can be used to emphasize key information or provide a sense of progression, such as in a loading screen or a welcome message.
  • Improves User Experience: It can break up large blocks of text, making the content more digestible and less overwhelming.

Understanding the Core Concepts

Before diving into the code, let’s understand the key CSS properties and techniques we’ll use:

  • `@keyframes`: This CSS rule controls the animation sequence. We’ll define different states of our animation (e.g., when a character appears) at specific points in time (as percentages).
  • `animation-name`: This property links the animation to a specific `@keyframes` rule.
  • `animation-duration`: This property sets the length of time an animation takes to complete one cycle.
  • `animation-iteration-count`: This property determines how many times the animation repeats. We can set it to `infinite` for a continuous effect.
  • `overflow: hidden;`: This property is crucial for hiding the text that hasn’t yet appeared, effectively creating the typing effect.
  • `width`: We’ll manipulate the `width` property to reveal the text character by character.
  • `ch` unit: This unit represents the width of the “0” character in the font. It’s useful for setting the width of the text container to match the length of the text.

Step-by-Step Instructions: Building the Typing Effect

Let’s build our typing effect. We’ll start with the HTML, then move on to the CSS. This project will be a pure CSS solution, meaning no JavaScript is needed.

1. HTML Structure

Create a simple HTML structure. We’ll use a `div` element with a class of `typing-effect` to contain our text. You can customize the HTML to fit your specific needs, such as using a `

` tag or a `` tag.

<div class="typing-effect">This is a typing effect.</div>

2. Basic CSS Styling

Now, let’s add some basic CSS to style the text and set up the foundation for our animation. This includes setting the font, size, and initial `overflow` property.

.typing-effect {
  font-family: monospace; /* Or any font you prefer */
  font-size: 2em;
  overflow: hidden; /* Hide the text initially */
  white-space: nowrap; /* Prevent the text from wrapping */
  width: 0; /* Initially, the width is 0 */
  animation: typing 5s steps(22) infinite; /* Animation name, duration, steps, and iteration count */
  color: #333; /* Text color */
}

Here’s a breakdown of the CSS:

  • `font-family`: Sets the font. Monospace fonts are often preferred for this effect.
  • `font-size`: Sets the font size.
  • `overflow: hidden`: This is crucial; it hides the text that is not yet revealed.
  • `white-space: nowrap`: Prevents text from wrapping to the next line.
  • `width: 0`: Initially, the width of the container is set to zero, effectively hiding all the text.
  • `animation`: This is a shorthand property that sets several animation properties at once:
    • `typing`: The name of the animation.
    • `5s`: The duration of the animation (5 seconds).
    • `steps(22)`: This is the key to the typing effect. The `steps()` timing function divides the animation into discrete steps. The value (22 in this case) corresponds to the number of characters in the text. This ensures that each character appears individually. If you change the text, you’ll need to update this value.
    • `infinite`: The animation will repeat indefinitely.
  • `color`: Sets the text color.

3. Creating the `@keyframes` Animation

This is where the magic happens. We’ll define the animation sequence using the `@keyframes` rule. This rule defines the animation’s behavior over time.

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%; /* Or calculate the width based on the number of characters and the font size */
  }
}

In this example, the animation starts with a width of `0` and gradually increases to `100%`. The `steps()` timing function, applied earlier, ensures that the width changes in discrete steps, revealing one character at a time.

For more control, you could use the `ch` unit to calculate the width. For example, if your text has 22 characters, you could calculate the width using `22ch`. However, the `100%` approach is usually simpler and more adaptable.

4. Adjusting the Animation

At this stage, you might want to customize the animation further. Here are some options:

  • Change the Animation Duration: Adjust the `animation-duration` property to control the typing speed. A shorter duration means a faster typing effect.
  • Add a Delay: You can introduce a delay before the animation starts using the `animation-delay` property.
  • Add a Cursor (Optional): While this project focuses on the core typing effect, you can enhance it by adding a blinking cursor. This usually involves adding a CSS animation to a pseudo-element (`::after` or `::before`). This is beyond the scope of this project, but there are many online resources that provide examples.

Here’s an example of adding a blinking cursor (this is a simplified example, and you might need to adjust it based on your design):

.typing-effect::after {
  content: "|"; /* The blinking cursor */
  animation: blink 0.7s step-end infinite;
}

@keyframes blink {
  from, to {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

Common Mistakes and How to Fix Them

When implementing the typing effect, you might encounter a few common issues:

  • Incorrect `steps()` Value: The number of steps in your `steps()` timing function must match the number of characters in your text (including spaces). If they don’t match, the typing effect will not appear correctly. Double-check your character count.
  • Text Wrapping: Ensure that `white-space: nowrap;` is set on the element with the `typing-effect` class. This prevents the text from wrapping to the next line, which would break the effect.
  • Font Issues: Some fonts render characters with varying widths, which can affect the typing effect. Consider using a monospace font for consistent character spacing.
  • Animation Not Working: Double-check that you have linked the `@keyframes` animation correctly using the `animation-name` property. Also, ensure that the `animation-duration` is set to a value greater than `0`.
  • Text Overflowing: If your text is too long or the container is too small, the text might overflow. Ensure the container has enough space to accommodate the full text, or consider using a shorter text string.

Example: Advanced Customization

Let’s demonstrate how to customize the typing effect further. We’ll add a slight delay before the typing starts and change the text color. We’ll also showcase how to calculate the width more precisely using the `ch` unit.

<div class="typing-effect-advanced">Hello, world!</div>
.typing-effect-advanced {
  font-family: 'Courier New', monospace;
  font-size: 2.5em;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  animation: typing-advanced 4s steps(13) 1s forwards; /* 1s delay and the 'forwards' fill-mode */
  color: #e44d26; /* A slightly different color */
}

@keyframes typing-advanced {
  from {
    width: 0;
  }
  to {
    width: 13ch; /* Use 'ch' unit to calculate the width */
  }
}

In this example:

  • We’ve added a `typing-effect-advanced` class to our HTML element.
  • We’ve changed the font to `’Courier New’`, a popular monospace font.
  • We’ve increased the font size.
  • The `animation` shorthand now includes a `1s` delay (`animation-delay`) before the animation starts.
  • The `color` is set to `#e44d26`.
  • The `steps()` value is now 13, matching the character count of “Hello, world!”.
  • We used the `ch` unit to calculate the width in the `@keyframes` rule. The `13ch` means the width will be equal to the width of 13 “0” characters (or whatever the font’s character spacing is).
  • We added the `forwards` fill mode. This makes the element retain the final style value of the animation (the full width) after the animation completes. Without this, the element might revert to a width of 0.

Key Takeaways and Best Practices

Here’s a summary of the key takeaways from this project:

  • Use `overflow: hidden;` to hide the text initially.
  • Use `white-space: nowrap;` to prevent text wrapping.
  • Use `@keyframes` to define the animation sequence.
  • Use `animation-duration` to control the typing speed.
  • Use `steps()` to create the character-by-character effect. Make sure the number of steps aligns with the number of characters.
  • Consider using a monospace font for consistent character spacing.
  • Experiment with `animation-delay` to add a delay.
  • Consider adding a blinking cursor for a more complete effect.
  • Test on different browsers and devices to ensure consistent behavior.
  • Optimize for performance, especially on mobile devices. Consider using hardware acceleration if needed.
  • Use the `ch` unit for a more precise calculation of the width.

FAQ

Here are some frequently asked questions about the typing effect:

  1. How can I make the typing effect loop continuously? You can set the `animation-iteration-count` property to `infinite`. This will cause the animation to repeat indefinitely.
  2. How do I change the speed of the typing effect? Adjust the `animation-duration` property. A shorter duration will result in a faster typing effect, and a longer duration will result in a slower effect.
  3. Can I use this effect with JavaScript? Yes, you can. While this project uses pure CSS, you can combine this effect with JavaScript to dynamically update the text or trigger the animation on certain events. You might use JavaScript to change the text content and then trigger the CSS animation.
  4. How do I add a blinking cursor? You can add a blinking cursor using the `::after` pseudo-element and another CSS animation. This is demonstrated in the examples above.
  5. What if my text contains HTML elements? You’ll need to adapt the character count in your `steps()` function to account for the characters in your HTML tags. Alternatively, you might need to use JavaScript to process the HTML and extract the text content before applying the typing effect.

By mastering the CSS typing effect, you’ve added a valuable tool to your web development arsenal. This seemingly simple animation can significantly enhance your website’s visual appeal and user engagement. It’s a testament to the power of CSS to create interactive and captivating experiences. The ability to control the flow of information and guide the user’s attention is crucial in today’s web landscape, and the typing effect is a great way to achieve that. The techniques you’ve learned here can be extended and adapted for a wide variety of other animation projects, so keep experimenting and exploring the possibilities of CSS. Always remember to prioritize user experience and performance when implementing animations, and your websites will surely stand out from the crowd.

More posts