Typing Text Effect

<div class="typing-container">
  <h3 class="typing-text">Welcome to Snipzy.dev</h3>
</div>

.typing-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.typing-text {
      font-size: 20px;
      font-weight: bold;
      overflow: hidden;
      white-space: nowrap;
      border-right: 3px solid #3498db;
      animation: typing 3s steps(10) infinite, blink 0.5s step-end infinite alternate;
    }
    
    @keyframes typing {
      0% { width: 0; }
      50% { width: 100%; }
      100% { width: 0; }
    }
    
    @keyframes blink {
      50% { border-color: transparent; }
    }