CSS에서 max-height 속성에 애니메이션을 적용하면 요소의 최대 높이가 부드럽게 변화하는 효과를 만들 수 있습니다. @keyframes 규칙 안에서 특정 시점(예: 30%)의 max-height 값을 지정하면, 해당 지점까지 애니메이션이 진행되는 동안 요소의 높이가 자연스럽게 조절됩니다.
예제 코드
아래 예제에서는 주황색 배경의 div 요소에 무한 반복 애니메이션을 적용하여, 전체 애니메이션 구간의 30% 지점에서 최대 높이가 100px로 줄어들도록 설정했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 350px;
background-color: orange;
overflow: auto;
border: 1px solid black;
animation: myanim 3s infinite;
}
@keyframes myanim {
30% {
max-height: 100px;
}
}
</style>
</head>
<body>
<h1>max-height 예제</h1>
<div>
<p>데모 텍스트입니다. 데모 텍스트입니다. 데모 텍스트입니다.
데모 텍스트입니다. 데모 텍스트입니다. 데모 텍스트입니다.
데모 텍스트입니다. 데모 텍스트입니다. 데모 텍스트입니다.
데모 텍스트입니다. 데모 텍스트입니다. 데모 텍스트입니다.
데모 텍스트입니다. 데모 텍스트입니다. 데모 텍스트입니다.
데모 텍스트입니다. 데모 텍스트입니다. 데모 텍스트입니다.
데모 텍스트입니다. 데모 텍스트입니다. 데모 텍스트입니다.
</p>
</div>
</body>
</html>코드 설명
- animation: myanim 3s infinite; — 'myanim'이라는 이름의 키프레임 애니메이션을 3초 동안 무한히 반복 실행합니다.
- @keyframes myanim { 30% { ... } } — 애니메이션 진행률이 30%에 도달했을 때
max-height를 100px로 변경합니다. - overflow: auto; — 콘텐츠가 최대 높이를 초과할 경우 스크롤바가 나타나도록 하여 내용이 잘리지 않게 합니다.
이 기법은 아코디언 메뉴나 접기/펼치기 UI처럼 요소의 높이가 유동적으로 변해야 하는 경우에 유용하게 활용할 수 있습니다.