CSS Typewriter Effect with Alternating Text

This code provides an interesting way to create a typewriter effect with alternating text on your static web page using only CSS, without the need for JavaScript. This effect allows you to display text that appears as if it is being typed out in real-time. The code achieves this effect by utilizing CSS animations and keyframes to control the width of the text elements.

The alternating text and the blinking caret symbol at the end of each line create a dynamic and engaging visual effect. By incorporating this code into your web page, you can add an eye-catching element that captures the attention of your visitors.

How to Create CSS Typewriter Effect with Alternating Text

1. To create a typing effect, begin by adding two span elements with the class names “text_1” and “text_2”. Put the desired text within these tags that you wish to display as the typewriter effect.

<h1><span class="text_1">Fancy heading on your static web page</span><span class="text_2">What?? How does it change without JavaScript?</span></h1>

2. To style and animate text as typing text, use the following CSS code. Feel free to modify the CSS to customize it according to your specific needs. Additionally, make sure to adjust the width of the text based on the length of your desired text.

.text_1 {
  animation: text1;
}

.text_2 {
  animation: text2;
}

.text_1, .text_2 {
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  position: relative;
  animation-duration: 20s;
  animation-timing-function: steps(25, end);
  animation-iteration-count: infinite;
}

.text_1::after, .text_2::after {
  content: "|";
  position: absolute;
  right: 0;
  animation: caret infinite;
  animation-duration: 1s;
  animation-timing-function: steps(1, end);
}

@keyframes text2 {
  0%, 50%, 100% {
    width: 0;
  }
  
  60%, 90% {
    width: 21.2em;
  }
}

@keyframes text1 {
  0%, 50%, 100% {
    width: 0;
  }
  10%, 40% {
    width: 17em;
  }
}

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

This CSS code provides the necessary styles and animations to create a typing effect on your text. The .text_1 and .text_2 classes are used to apply the animation and hide any overflow. The ::after pseudo-elements add a blinking caret symbol at the end of each line.

The @keyframes rules define the animation behavior, controlling the width of the text at different keyframe percentages. By adjusting the width values, you can customize the animation to match the length of your specific text.

That’s all! hopefully, you have successfully created Typewriter text effect. If you have any questions or suggestions, feel free to comment below.