ASWCode | Typing Text Animation Snippet

Typing Text Animation

This snippet allows you to add a smooth typing effect to your website hero or intro sections. Perfect for web developers looking to enhance user engagement with dynamic text animations. The code is lightweight, customizable, and easy to integrate with existing HTML and CSS.

How to use: Copy and paste the code into your HTML file.
Change text: Edit the text inside the <h1> tag.
Adjust speed: Change animation-duration in @keyframes typing.

<h1 class="typing">Welcome to ASWCode!</h1>

<style>
.typing {
  color: #ffffff;
  border-right: 3px solid #00ffcc;
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  animation: typing 3s steps(20) forwards, blink 0.6s infinite;
}
@keyframes typing {
  to { width: 20ch; }
}
@keyframes blink {
  50% { border-color: transparent; }
}
</style>