By dororok 
위의 영상과 같이 순차적으로 타이핑이 되고, 커서 깜빡임 효과까지 있는 애니메이션을 만드는 방법이다!
의뢰받은 사이트에 위의 애니메이션이 필요하여 만들어 봤다.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
font-family: 'Pretendard Variable';
padding: 50px;
background-color: grey;
}
p {
margin-top: 0px;
}
/* Typing animation */
.hero-wrap .inline-block {
display: inline-block;
}
.hero-wrap p {
padding-left: 2vw;
padding-right: 5vw;
margin-bottom: 0px;
padding-top: 0vw;
}
.hero-wrap .type {
font-weight: 900;
font-size: 4vw;
line-height: 6vw;
padding-bottom: 1vw;
display: inline-block;
margin-bottom: 1vw;
width: 0;
overflow: hidden;
white-space: nowrap;
}
.hero-wrap .type.one {
background-color: black;
color: white;
animation: typing 1.5s steps(25, end) forwards,
blink-effect 1s step-end 2s;
}
.hero-wrap .type.two {
color: white;
animation: typing 1.5s steps(25, end) forwards,
blink-effect 1s step-end 2s;
animation-delay: 1.5s;
}
.hero-wrap .type.three {
background-color: white;
color: #00dec7;
animation: typing 1.5s steps(25, end) forwards,
blink-effect 1s step-end infinite;
animation-delay: 3s;
}
@keyframes typing {
from {
width: -100%;
}
to {
width: 100%;
}
}
@keyframes blink-effect {
50% {
border-right: 0.08em solid #9a9a9a;
}
}
/* Typing animation */
</style>
</head>
<body>
<div class="hero-wrap">
<div class="inline-block">
<div class="type one">
<p>첫 번째 문장</p>
</div>
</div>
<br />
<div class="inline-block">
<div class="type two"><p>두 번째 문장</p></div>
</div>
<br />
<div class="inline-block">
<div class="type three"><p>세 번째 문장</p></div>
</div>
</div>
</body>
</html>