CSS 애니메이션을 활용하면 자바스크립트 없이도 마치 타자기로 글자를 입력하는 듯한 타자기(Typewriter) 애니메이션 효과를 손쉽게 구현할 수 있습니다.
핵심 원리는 width 속성을 이용해 텍스트 영역의 너비를 0%에서 100%까지 점진적으로 늘리고, steps() 타이밍 함수를 적용해 부드러운 확장이 아닌 한 글자씩 끊어지는 듯한 움직임을 만드는 것입니다. 여기에 커서 역할을 하는 오른쪽 테두리에 깜빡임 애니메이션을 추가하면 완성됩니다.
아래 예제를 통해 실제 구현 방법을 살펴보겠습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 2%;
font-family: Courier, monospace;
display: inline-block;
}
div > div {
overflow: hidden;
animation: enter 4s steps(30, end), blinker .65s step-end infinite;
white-space: nowrap;
font-size: 1.4em;;
border-right: 5px solid blue;
}
@keyframes enter {
0% {
width: 0%
}
100% {
width: 100%
}
}
@keyframes blinker {
0%, 100% {
border-color: transparent
}
50% {
border-color: blue;
}
}
</style>
</head>
<body>
<div class="typewriter">
<div class="typewriter-text">This is what you've been waiting for..</div>
</div>
</body>
</html>코드 설명
1. 타이핑 효과 (enter 애니메이션)
enter 키프레임은 요소의 너비를 0%에서 100%로 4초 동안 확장합니다. 이때 steps(30, end)를 사용하면 전체 애니메이션이 30단계로 나뉘어 실행되므로, 글자 수가 30자인 텍스트가 한 글자씩 순차적으로 나타나는 것처럼 보입니다.
2. 커서 깜빡임 효과 (blinker 애니메이션)
오른쪽 파란색 테두리(border-right)가 타자기 커서 역할을 합니다. blinker 키프레임이 0.65초 간격으로 무한 반복되며 테두리 색상을 투명하게 ↔ 파란색으로 전환해, 실제 커서가 깜빡이는 듯한 효과를 연출합니다.
3. 기타 필수 속성
- overflow: hidden — 너비가 늘어나는 과정에서 아직 '타이핑되지 않은' 텍스트가 화면에 미리 노출되지 않도록 가려줍니다.
- white-space: nowrap — 텍스트가 줄바꿈되지 않고 한 줄로 유지되게 합니다.
실행 결과
위 코드를 브라우저에서 실행하면 다음과 같이 텍스트가 한 글자씩 타이핑되면서 파란색 커서가 함께 깜빡이는 결과를 확인할 수 있습니다.
마무리
이처럼 CSS의 @keyframes와 steps() 함수만으로도 별도의 자바스크립트 없이 자연스러운 타자기 애니메이션을 만들 수 있습니다. 텍스트 길이에 맞춰 steps()의 단계 수와 애니메이션 시간을 조절하면 다양한 문구에 응용할 수 있으니, 랜딩 페이지나 포트폴리오 사이트의 인트로 효과로 활용해 보시기 바랍니다.