<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;}
}
This Pen doesn't use any external CSS resources.