CSS에서 line-height 속성에 애니메이션 효과를 적용하려면 @keyframes 규칙을 활용하면 됩니다. 아래 예제는 문단의 줄 간격이 20px에서 50px로 부드럽게 변화하는 애니메이션을 무한 반복하는 코드입니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
p {
animation: mymove 3s infinite;
line-height: 20px;
}
@keyframes mymove {
70% {
line-height: 50px;
}
}
</style>
</head>
<body>
<p>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!
</p>
</body>
</html>
코드 설명
animation: mymove 3s infinite; — 'mymove'라는 이름의 애니메이션을 3초 동안 실행하고, 무한히 반복하도록 설정합니다.
@keyframes mymove — 애니메이션의 중간 지점(70%)에서 line-height 값을 50px로 변경하여 줄 간격이 점차 넓어지는 효과를 만듭니다.
이처럼 line-height는 CSS 애니메이션으로 자연스럽게 전환할 수 있는 속성이며, 텍스트 가독성 강조나 시각적 효과를 위해 활용할 수 있습니다.