CSS에서 flex 속성에 애니메이션을 적용하면 플렉스 아이템의 크기가 부드럽게 변화하는 효과를 만들 수 있습니다. 핵심은 @keyframes 규칙을 사용해 애니메이션 중간 지점에서 flex 값을 변경하는 것입니다.
동작 원리
아래 예제는 animation 속성으로 4초 길이의 애니메이션을 무한 반복하도록 설정하고, @keyframes의 50% 지점에서 flex: 1;을 적용합니다. 이렇게 하면 각 박스가 주기적으로 늘어났다 줄어드는 효과를 보여줍니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
.box {
display: flex;
background-color: orange;
align-content: space-between;
height: 150px;
width: 600px;
flex-wrap: wrap;
}
.box > div {
background-color: white;
text-align: center;
line-height: 40px;
font-size: 25px;
width: 100px;
margin: 5px;
}
div {
animation: myanim 4s infinite;
}
@keyframes myanim {
50% {
flex: 1;
}
}
</style>
</head>
<body>
<h1>Quiz</h1>
<div class="box">
<div style="order: 8">Q1</div>
<div style="order: 6">Q2</div>
<div style="order: 2">Q3</div>
<div style="order: 1">Q4</div>
<div style="order: 7">Q5</div>
<div style="order: 4">Q6</div>
<div style="order: 3">Q7</div>
<div style="order: 5">Q8</div>
</div>
</body>
</html>
코드 설명
.box 컨테이너: display: flex;로 플렉스 레이아웃을 활성화하고, flex-wrap: wrap;으로 아이템이 공간이 부족할 때 줄바꿈되도록 설정했습니다. 또한 align-content: space-between;으로 여러 줄 사이의 간격을 균등하게 분배합니다.
order 속성: 각 자식 요소에는 인라인 스타일로 order 값이 지정되어 있어, HTML 작성 순서와 관계없이 지정된 순서대로 배치됩니다. 예를 들어 Q4(order: 1)가 가장 먼저, Q1(order: 8)이 가장 나중에 표시됩니다.
애니메이션: animation: myanim 4s infinite;는 'myanim'이라는 이름의 키프레임을 4초 동안 실행하고 무한히 반복하라는 의미입니다. 애니메이션이 진행되는 동안 50% 시점에 도달하면 모든 div에 flex: 1;이 적용되어 각 아이템이 남은 공간을 균등하게 차지하며 확장됩니다.
이 코드를 HTML 파일로 저장한 뒤 브라우저에서 열면, 흰색 박스들이 주기적으로 늘어나고 줄어드는 애니메이션을 확인할 수 있습니다.