CSS에서 min-height(최소 높이) 속성에 애니메이션을 적용하려면 @keyframes 규칙과 animation 속성을 함께 사용하면 됩니다. min-height는 애니메이션이 가능한(animatable) 속성이므로, 키프레임의 특정 시점에서 값을 변경하면 요소의 최소 높이가 부드럽게 변화하는 효과를 만들 수 있습니다.
동작 원리
아래 예제는 다음과 같은 방식으로 작동합니다.
animation: myanim 3s infinite;— 'myanim'이라는 이름의 애니메이션을 3초 동안 실행하고 무한 반복합니다.@keyframes myanim내부의30%지점에서min-height: 250px;를 적용하여, 애니메이션 진행률이 30%에 도달했을 때 요소의 최소 높이가 250px로 변합니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
div {
overflow: auto;
width: 350px;
background-color: blue;
color: white;
border: 1px solid black;
animation: myanim 3s infinite;
}
@keyframes myanim {
30% {
min-height: 250px;
}
}
</style>
</head>
<body>
<h1>min-height 예제</h1>
<div>
<p>데모용 텍스트입니다. 데모용 텍스트입니다. 데모용 텍스트입니다.
데모용 텍스트입니다. 데모용 텍스트입니다. 데모용 텍스트입니다.
데모용 텍스트입니다. 데모용 텍스트입니다. 데모용 텍스트입니다.
데모용 텍스트입니다. 데모용 텍스트입니다. 데모용 텍스트입니다.
데모용 텍스트입니다. 데모용 텍스트입니다. 데모용 텍스트입니다.
데모용 텍스트입니다. 데모용 텍스트입니다. 데모용 텍스트입니다.
데모용 텍스트입니다. 데모용 텍스트입니다. 데모용 텍스트입니다.
</p>
</div>
</body>
</html>참고 사항
위 코드를 브라우저에서 실행하면 파란색 배경의 div 요소가 3초 주기로 반복되면서, 애니메이션 구간의 30% 지점에서 최소 높이가 250px까지 늘어났다가 다시 줄어드는 것을 확인할 수 있습니다. 또한 overflow: auto; 설정으로 인해 콘텐츠가 요소 높이를 초과할 경우 스크롤바가 자동으로 생성됩니다.
애니메이션 속도나 반복 횟수를 조절하고 싶다면 animation 속성의 지속 시간(3s)과 infinite 값을 원하는 대로 변경하면 됩니다.