<p class="typing-txt">안녕하세요</p> 
  
p.typing-txt{
  position:relative;
  font-size: 15px;
  width: 70px;
  height: 15px; 
  overflow: hidden;
  animation: typingAni 3s steps(5, end) 1;
} 
p.typing-txt::after{
  position: absolute; 
  display: block;
  content: ""; 
  width: 20px; 
  height: 15px;
  top: 0;
  right: 0; 
  border-right: 1px solid #000;
  animation: cursor 0.5s step-end infinite;
}
@keyframes typingAni {
  0%{width:0%}
  100%{width: 70px};
}
@keyframes cursor{
  0%{opacity:0;}
  50%{opacity:1;}
  100%{opacity:0;}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js