CSS에서 max-width 속성에 애니메이션을 적용하려면 @keyframes 규칙을 활용하면 됩니다. 아래 예제는 요소의 최대 너비가 시간의 흐름에 따라 부드럽게 변화하도록 구현한 코드입니다.
동작 원리
@keyframes를 사용해 애니메이션의 특정 지점(예: 30%)에서 max-width 값을 지정하면, 브라우저가 시작 값부터 해당 값까지 자동으로 중간 상태를 계산하여 부드러운 전환 효과를 만들어 줍니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
div {
overflow: auto;
background-color: blue;
color: white;
border: 1px solid black;
animation: myanim 3s;
}
@keyframes myanim {
30% {
max-width: 250px;
}
}
</style>
</head>
<body>
<h1>max-width 애니메이션 예제</h1>
<div>
<p>This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
</p>
</div>
</body>
</html>코드 설명
- animation: myanim 3s; — div 요소에 'myanim'이라는 이름의 애니메이션을 3초 동안 한 번 실행하도록 설정합니다.
- @keyframes myanim { 30% { max-width: 250px; } } — 애니메이션이 진행된 시점의 30% 지점에서 요소의 최대 너비가 250px가 되도록 정의합니다.
- overflow: auto; — 콘텐츠가 요소의 크기를 벗어날 경우 스크롤바가 나타나도록 하여, 너비가 줄어드는 과정에서 텍스트가 잘리지 않고 확인할 수 있게 합니다.
위 코드를 실행하면 페이지가 로드되는 순간 파란색 박스의 최대 너비가 점진적으로 변하면서 애니메이션 효과를 확인할 수 있습니다.