CSS에서 letter-spacing(자간) 속성은 글자 사이의 간격을 조절하는 속성으로, CSS 애니메이션을 통해 부드럽게 변화시킬 수 있습니다. @keyframes 규칙과 함께 사용하면 텍스트의 자간이 점차 넓어지거나 좁아지는 시각적 효과를 쉽게 구현할 수 있습니다.
예제 코드
아래 예제는 letter-spacing 속성에 애니메이션을 적용하여, 문단의 글자 간격이 3px에서 20px로 서서히 넓어지는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
p {
letter-spacing: 3px;
animation: mymove 3s infinite;
}
@keyframes mymove {
70% {
letter-spacing: 20px;
}
}
</style>
</head>
<body>
<p>I am flying!</p>
</body>
</html>코드 설명
- letter-spacing: 3px; — 문단 텍스트의 기본 자간을 3픽셀로 설정합니다.
- animation: mymove 3s infinite; — 'mymove'라는 이름의 애니메이션을 3초 동안 무한 반복하도록 지정합니다.
- @keyframes mymove — 애니메이션의 진행 과정을 정의합니다. 전체 시간의 70% 지점에서 자간이 20px로 변화합니다.
참고 사항
letter-spacing은 애니메이션이 가능한(aninmatable) 속성이므로 transition이나 keyframes와 함께 사용할 수 있습니다. 자간 단위는 px뿐만 아니라 em, rem 등 상대 단위도 사용할 수 있으며, 음수 값을 지정하면 글자 간격을 좁힐 수도 있습니다. 이러한 기법은 타이포그래피 강조 효과나 로딩 화면, 배너 디자인 등에서 유용하게 활용됩니다.