Typing Animation

<div class="typing-container">
  <div class="typing-animation">Hello, I'm a typing animation!</div>
</div>

.typing-animation {
  font-family: 'Courier New', monospace;
  font-size: 20px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid #333;
  animation: typing 3s steps(40, end), blink-caret 0.75s step-end infinite;
}
@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}
@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: #333; }
}
.typing-container {
  display: inline-block;
  max-width: 100%;
}