[CSS] 타이핑 효과 애니메이션 구현하기

 

안녕하세요! 오늘은 심심풀이로 CSS 애니메이션을 활용해 타이핑 효과를 구현하는 코드를 작성해보았습니다. 

표시하고자 하는 텍스트를 미리 정해 둔 상태에서 시작해야 하므로 가정 먼저 다음과 같은 HTML 코드를 작성해주어야 합니다. 

 

<h1>00000</h1>

정말로 초간단한.. 숫자 0 다섯개입니다. 숫자 0 크기를 기준으로 한 글자의 크기를 정할 예정이므로 0 외에 다른 문자는 사용하지 않았습니다. 목표는 이 숫자들이 하나씩 타이핑되는 것처럼 보여지는 페이지를 만드는 것입니다. 그럼 다음, CSS 코드입니다. 

 

@keyframes typing{
  from{ width: 0; }
}
 
@keyframes cursor{
  50%{ border-color: transparent; }
}
 
h1{
  width: 5ch;
  overflow: hidden; 
  white-space: nowrap;
  border-right: .05em solid black;
  animation: typing 5s steps(5),
  cursor 1s steps(1) infinite;
}

 

1행부터 3행까지의 키프레임은 width가 0인 상태에서 시작하자는 의미의 typing 애니메이션 코드 블록입니다. 14행에서 h1의 animation으로 이를 지정하고 있으며, 지속시간(duration)은 5초로 했습니다. 글자수가 5개이므로 1초당 하나씩 하자는 의도에서 5초로 했습니다. 

 

5행부터 7행까지의 키프레임 cursor는 글자가 쓰여질 때마다 커서가 깜빡거리는 것처럼 보이게 하기 위해 border의 색깔을 한순간 투명하게 만드는 애니메이션입니다. 15행에서 h1의 animation을 추가 입력하고 있는데, 초당 한번씩 동작하며 커서의 동작을 구현한 만큼 무한반복(infinite)하도록 지정했습니다. 키프레임을 통해 투명해졌던 border는 13행의 코드로 인해 검게 보이게 됩니다. 

 

10행 코드는 최종적으로 표시되어야 할 너비를 지정한 것입니다. 여기에는 ch라는 단위가 사용됐는데, 이는 문자 0 하나의 크기를 의미하는 단위입니다. 5ch 이므로 00000 만큼의 너비를 의미합니다.

 

11행 코드는 h1 태그의 텍스트 컨텐츠 너비가 h1 블록 너비보다 클 경우 컨텐츠 내용을 가리기 위한 속성입니다.

 

12행 코드는 공백에 대한 처리를 지정한 것으로, 연속 공백이 있을 시 이를 하나로 합칠 것이며 줄바꿈은 오직 <br> 태그가 있을 경우에만 허용하겠다는 의미입니다.

 

위와 같이 HTML+CSS 코드를 작성해주면, 자바스크립트를 사용하지 않아도 한줄의 텍스트가 한 글자씩 타이핑되는 효과를 구현할 수가 있습니다. 다만 애니메이션은 언제나 길면 길수록 그 이점이 사라진다는 특징(사용자 경험)을 가지므로, 이를 유념하여 코드를 작성하실 필요가 있습니다.

 

학습 참고 도서 - CSS 시크릿

(중급 이상?? 추천합니다)