CSS 타이핑효과

우아한 형제들 클론코딩을 하면서 메인슬라이드에 타이핑효과가 들어가는 텍스트를 구현해보았다.

--> 참고 사이트
우아한형제들

<div class="video-text">
	<p class="sm-title">우아한형제들이 알고 싶다</p>
    <strong class="title">
    	배경음악<br>
        <span class="flex"> <i>전</i> <i>격</i> <i>무</i> <i>료</i> <i>나</i> <i>눔</i> </span>
    </strong>
    <span class="cate">음악 ></span>
</div>

.video-text 를 감싸는 부모태그에 postion:relative;를 넣어 기준을 잡아주고

.sc-visual .video-text{ display: flex; position: absolute; flex-direction: column; gap: 35px; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; text-align: center; }
.sc-visual .sm-title{font-size: 22px; font-weight: 700; }
.sc-visual .title{ font-size: 72px; font-weight: 400; font-family: "BMhanna11"; line-height: 1.4; }
.sc-visual .title .flex{display: flex; justify-content: center;}


/* 타이핑치듯 쓰는방법 */
.sc-visual .title .flex i{opacity: 0;}

/* slide가 active됐을때만(슬라이드에 도달했을때) 작동함 */
.sc-visual .swiper-slide-active .title .flex i{opacity: 0; animation: fade 0.3s forwards; }
.sc-visual .title .flex i:nth-child(1){animation-delay: 0.2s;}
.sc-visual .title .flex i:nth-child(2){animation-delay: 0.4s;}
.sc-visual .title .flex i:nth-child(3){animation-delay: 0.8s;}
.sc-visual .title .flex i:nth-child(4){animation-delay: 1.0s;}
.sc-visual .title .flex i:nth-child(5){animation-delay: 1.2s;}
.sc-visual .title .flex i:nth-child(6){animation-delay: 1.4s;}
.sc-visual .title .flex i:nth-child(7){animation-delay: 1.8s;}
.sc-visual .title .flex i:nth-child(8){animation-delay: 2s;}
.sc-visual .video-text .cate{font-size: 15px; font-weight: 700; }


@keyframes fade{
    0%{opacity: 0;}
    100%{opacity: 1;}
}

① 기초를 잡아주기

• ⓐ .video-text로 postion:absolute;로 위치를 잡는다.
• ⓑ .flex i태그에 opacity:0;으로 처음에는 글자가 보이지않게 설정

② keyframe에 opacity를 조정해서 .flex i가 서서히 나오게 설정

③ 각 .flex i:nth-child에 애니메이션 딜레이를 걸어 한글자씩 나오게끔 설정해주면 타이핑하는 것과 같은 효과를 볼 수 있다.