CSS에서는 @keyframes 규칙과 animation 속성을 활용하여 글꼴(font) 속성에도 애니메이션 효과를 적용할 수 있습니다. 이를 활용하면 텍스트의 크기와 서체가 일정한 주기 동안 부드럽게 변화하는 효과를 만들 수 있습니다.
아래 예제는 <p> 요소에 5초 주기의 무한 반복 애니메이션을 적용하고, 애니메이션이 70% 진행된 시점에 글꼴 스타일이 변경되도록 설정한 코드입니다. 직접 실행해 보면 텍스트가 점차 커지며 서체가 바뀌는 것을 확인할 수 있습니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 2px solid black;
width: 400px;
height: 100px;
animation: myanim 5s infinite;
}
@keyframes myanim {
70% {
font: 35px arial, sans-serif;
}
}
</style>
</head>
<body>
<p>This is demo text</p>
</body>
</html>코드 설명
- animation: myanim 5s infinite; — 'myanim'이라는 이름의 애니메이션을 5초 동안 한 번 실행하고, 이를 무한히 반복합니다.
- @keyframes myanim — 애니메이션의 중간 상태를 정의하는 규칙입니다. 여기서는 전체 진행률의 70% 지점에 글꼴 스타일을 지정했습니다.
- font: 35px arial, sans-serif; — 애니메이션이 70% 진행된 시점에 글꼴 크기가 35px로 커지고, 서체가 Arial(없으면 sans-serif)로 변경됩니다.
이처럼 font 단축 속성 대신 font-size, font-family 등 개별 하위 속성에 각각 애니메이션을 적용하는 방법도 가능하므로, 필요에 따라 더 세밀하게 조절할 수 있습니다.