CSS의 min-width(최소 너비) 속성에 애니메이션을 적용하려면 @keyframes 규칙을 활용하면 됩니다. 아래 예제는 3초 동안 무한 반복되는 애니메이션을 통해 div 요소의 최소 너비를 자연스럽게 변화시키는 방법을 보여줍니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
div {
overflow: auto;
width: 50%;
background-color: blue;
color: white;
border: 1px solid black;
animation: myanim 3s infinite;
}
@keyframes myanim {
30% {
min-width: 550px;
}
}
</style>
</head>
<body>
<h1>min-width 예제</h1>
<div>
<p>데모 텍스트입니다. 데모 텍스트입니다. 데모 텍스트입니다.
데모 텍스트입니다. 데모 텍스트입니다. 데모 텍스트입니다.
데모 텍스트입니다. 데모 텍스트입니다. 데모 텍스트입니다.
데모 텍스트입니다. 데모 텍스트입니다. 데모 텍스트입니다.
데모 텍스트입니다. 데모 텍스트입니다. 데모 텍스트입니다.
데모 텍스트입니다. 데모 텍스트입니다. 데모 텍스트입니다.
데모 텍스트입니다. 데모 텍스트입니다. 데모 텍스트입니다.
</p>
</div>
</body>
</html>
코드 설명
위 코드의 핵심 부분은 다음과 같습니다.
- animation 속성:
myanim 3s infinite는 'myanim'이라는 이름의 애니메이션을 3초 동안 실행하고, 무한히 반복하도록 설정합니다. - @keyframes 규칙: 애니메이션 진행률이 30% 지점에 도달했을 때
min-width값이 550px로 변경됩니다. - overflow: auto: 콘텐츠가 요소의 크기를 초과할 경우 스크롤바가 자동으로 생성되어 내용이 잘리지 않습니다.
브라우저에서 이 코드를 실행하면 파란색 배경의 div 요소가 주기적으로 늘어나고 줄어드는 애니메이션 효과를 확인할 수 있습니다. 이처럼 min-width는 다른 CSS 속성과 마찬가지로 @keyframes와 함께 사용하여 부드러운 전환 효과를 만들 수 있습니다.