CSS에서 text-indent 속성에 애니메이션을 적용하면 문단의 첫 줄 들여쓰기가 부드럽게 움직이는 효과를 만들 수 있습니다. 이 속성은 애니메이션이 가능한(animatable) 속성이기 때문에 @keyframes 규칙과 함께 사용하면 자연스러운 전환 효과를 구현할 수 있습니다.
구현 방법
아래 예제는 animation 속성과 @keyframes를 활용하여 div 요소의 텍스트 들여쓰기를 3초 주기로 반복적으로 변화시키는 코드입니다. 애니메이션 진행률 30% 지점에서 들여쓰기 값이 120px까지 증가하도록 설정했습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: orange;
border: 2px solid blue;
animation: myanim 3s infinite;
}
@keyframes myanim {
30% {
text-indent: 120px;
}
}
</style>
</head>
<body>
<h1>CSS text-indent 속성</h1>
<div>
This is demo text. This is demo text.
This is demo text.This is demo text.
This is demo text. This is demo text.
This is demo text. This is demo text.
This is demo text. This is demo text.
This is demo text. This is demo text.
</div>
</body>
</html>코드 설명
- animation: myanim 3s infinite; — 'myanim'이라는 이름의 키프레임 애니메이션을 3초 동안 실행하고, 무한히(infinite) 반복합니다.
- @keyframes myanim — 애니메이션의 중간 상태를 정의합니다. 여기서는 30% 시점에
text-indent: 120px;을 적용하여 첫 줄이 오른쪽으로 밀려나는 효과를 만듭니다. - background-color와 border — 요소의 변화를 시각적으로 쉽게 확인할 수 있도록 배경색과 테두리를 추가했습니다.
브라우저에서 위 코드를 실행하면 주황색 배경의 div 영역 안에서 텍스트 첫 줄의 들여쓰기가 왼쪽에서 오른쪽으로 부드럽게 이동하는 것을 확인할 수 있습니다. 이 기법은 문단 강조, 로딩 효과, 텍스트 인터랙션 등 다양한 UI 연출에 활용할 수 있습니다.