[CSS] typing 썼다 지우는 애니매이션 구현하기

자기소개 페이지를 만들던 중 "I'm frontend developer." 라는 문구를 썼다 지웠다 하는 애니메이션을 추가하고 싶어졌다.

먼저 Html에 h6 태그를 생성한 후 css를 입혀주었다.

index.html

<div>
 	<h6 class="home-ment" id="writing"></h6>
</div>

이제 css파일을 살펴보자

index.css

#writing {
  color: transparent;
  font-size: 40px;
  white-space: nowrap;
}

#writing::after {
  content: "I'm frontend developer.";
  position: absolute;
  color: #3366cc;
  overflow: hidden;
  border-right: 1px solid #3366cc;
  animation: typing 5s steps(31) infinite;
}

@keyframes typing {
  0% {
    width: 0%;
  }
  50% {
    width: 420px;
  }
  100% {
    width: 0%;
  }
}

요소 설명

1. writing
   -> color : transparent
   --> 폰트 색깔을 투명한 색으로 지정
   -> white-space : nowrap
   --> 공백과 줄바꿈을 지정
2. writing::after
   -> content : "I'm ~ "
   --> 작성한 내용
   -> border-right : 1px solid #3366cc
   --> 작성할 내용 우측에 마우스 클릭 효과 주기
   -> animation : typing 5s steps(31) infinite;
   --> typing이라는 keyframs 적용, 5초간 31단계를 거쳐 무한반복으로
3. @keyframs typing
   -> content를 쓰고 지우는 동안의 너비 설정

결과

white-space 속성 정리

속성 값	설명
normal	연속된 공백과 줄 바꿈은 메꾸어져서 하나의 공백으로 표시됩니다. 소스(Source)내의 줄 바꿈 문자도 공백 문자로써 처리됩니다. 필요하다면 긴 줄을 줄바꿈 합니다.
nowrap	normal과 같이 공백을 채우지만 가로로 긴 줄에서도 줄 바꿈을 하지 않고 표시합니다.
pre	연속된 공백을 그대로 표시합니다. 또한 긴 줄도 줄 바꿈하지 않고 표시합니다.
pre-wrap	연속 공백은 그대로 유지됩니다. 행(行)의 줄 바꿈은 행의 박스를 채우기 위해 필요한 경우에 실행합니다.
pre-line	연속 공백은 메꾸어져 하나의 공백이 됩니다. 행의 줄 바꿈은 행의 박스를 메꾸기 위해 필요한 때에 실행됩니다.