CSS에서 font-size 속성에 애니메이션을 적용하려면 @keyframes 규칙과 animation 속성을 함께 사용하면 됩니다. @keyframes로 글자 크기가 변화하는 지점(키프레임)을 정의하고, animation 속성으로 실행 시간과 반복 여부를 지정하는 방식입니다.
예제 코드
아래 예제에서는 문단 요소의 글자 크기가 5초 동안 30px까지 커지는 애니메이션이 무한히 반복됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 2px solid black;
width: 400px;
height: 100px;
animation: myanim 5s infinite;
}
@keyframes myanim {
70% {
font-size: 30px;
}
}
</style>
</head>
<body>
<p>This is demo text</p>
</body>
</html>코드 설명
animation: myanim 5s infinite; — 'myanim'이라는 이름의 애니메이션을 5초 동안 실행하며, 무한히(infinite) 반복하도록 설정합니다.
@keyframes myanim { 70% { font-size: 30px; } } — 애니메이션 진행률이 70% 지점에 도달했을 때 글자 크기를 30px로 변경합니다. 시작점(0%)은 요소의 기본 font-size 값이며, 70% 이후에는 다시 원래 크기로 돌아가며 부드러운 확대·축소 효과가 만들어집니다.
이처럼 font-size는 수치 값으로 계산되는 속성이므로 중간값 보간(interpolation)이 가능해, 별도의 JavaScript 없이도 순수 CSS만으로 자연스러운 글자 크기 애니메이션을 구현할 수 있습니다.