CSS에서 height 속성에 애니메이션 효과를 적용하려면 @keyframes 규칙과 animation 속성을 함께 사용하면 됩니다. 아래 예제는 div 요소의 높이가 100px에서 400px로 부드럽게 변화하도록 구현한 코드입니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid black;
width: 300px;
height: 100px;
animation: myanim 5s infinite;
}
@keyframes myanim {
30% {
height: 400px;
}
}
</style>
</head>
<body>
<div>This is demo text</div>
</body>
</html>코드 설명
- animation: myanim 5s infinite; — 'myanim'이라는 이름의 애니메이션을 5초 동안 실행하며, 무한히 반복합니다.
- @keyframes myanim — 애니메이션의 진행 단계를 정의합니다. 여기서는 전체 시간의 30% 지점에 도달했을 때 높이가 400px로 변경됩니다.
- 애니메이션이 반복되면서 요소의 높이가 자연스럽게 늘어났다가 원래 크기로 돌아오는 효과를 확인할 수 있습니다.
이처럼 CSS만으로도 JavaScript 없이 간단하게 높이 변화 애니메이션을 만들 수 있으며, % 값이나 from, to 키워드를 활용해 다양한 단계의 애니메이션을 정의할 수 있습니다.