CSS flex-grow 속성에 애니메이션 적용하기
CSS에서 flex-grow 속성에 애니메이션 효과를 주고 싶다면, @keyframes 규칙과 animation 속성을 함께 활용하면 됩니다. flex-grow 값이 변화함에 따라 플렉스 아이템이 차지하는 공간이 부드럽게 늘어나거나 줄어드는 모습을 연출할 수 있습니다.
flex-grow 속성이란?
flex-grow는 플렉스 컨테이너 안에서 각 아이템이 남은 공간을 얼마나 많이 차지할지 비율을 결정하는 속성입니다. 기본값은 0이며, 숫자가 클수록 다른 아이템보다 더 넓은 영역을 할당받게 됩니다. 이 값은 숫자 단위로 조절되기 때문에 중간값으로 자연스럽게 전환되는 애니메이션이 가능합니다.
예제 코드
아래 예제는 4초 동안 무한히 반복되는 애니메이션을 통해 flex-grow 값을 변경하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
background-color: red;
align-content: space-between;
}
.mycontainer > div {
background-color: white;
text-align: center;
line-height: 40px;
font-size: 25px;
width: 100px;
margin: 5px;
}
div {
animation: myanim 4s infinite;
}
@-webkit-keyframes myanim {
30% {
flex-grow: 3;
}
}
</style>
</head>
<body>
<h1>Quiz</h1>
<div class = "mycontainer">
<div style = "flex-grow: 1">A1</div>
<div style = "flex-grow: 1">A2</div>
<div style = "flex-grow: 20">A3</div>
<div style = "flex-grow: 1">A4</div>
<div style = "flex-grow: 1">A5</div>
</div>
</body>
</html>코드 상세 설명
.mycontainer 클래스는 display: flex;를 적용한 플렉스 컨테이너로, 배경색은 빨간색으로 지정되어 있습니다. 그리고 @keyframes myanim 규칙에서 애니메이션 진행률 30% 시점에 flex-grow: 3; 값을 적용하도록 정의했습니다.
각 div 요소에는 animation: myanim 4s infinite;가 설정되어 있어, 4초를 주기로 애니메이션이 끝없이 반복됩니다. 그 결과 A1부터 A5까지의 아이템들이 일정 시점마다 넓이가 늘어났다가 원래대로 돌아오는 역동적인 효과를 확인할 수 있습니다.
참고 사항
구형 WebKit 기반 브라우저와의 호환성을 위해 위 예제에서는 @-webkit-keyframes 접두사를 함께 사용했습니다. 최신 브라우저에서는 표준 문법인 @keyframes만으로도 충분히 동작합니다. 또한 flex-grow 애니메이션은 레이아웃 재계산을 유발하므로, 성능이 중요한 페이지에서는 과도한 사용을 피하는 것이 좋습니다.