CSS Steps Function Typing

<!DOCTYPE html>
<title>My Example</title>

.typewriter-text {
    color: #00ff00;
    font-family: monospace;
    font-size: 1.5em;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid #00ff00;
    
    /* 
      The text "Access granted." has 15 characters.
      We use steps(16) to add one extra "blank" step at the end. 
      This ensures the final period stays visible for a moment 
      before the 'alternate' animation reverses!
    */
    animation: 
      typing 3s steps(16) infinite alternate,
      blink 0.8s steps(1, end) infinite;
  }

@keyframes typing {
    from { width: 0; }
    /* 16ch allows room for that extra holding step */
    to { width: 16ch; }
  }

@keyframes blink {
    from, to { border-color: transparent; }
    50% { border-color: #00ff00; }
  }
</style>

<div class="typewriter-container">
  <div class="typewriter-text">Access granted.</div>
</div>