CSS로 flex-basis 속성 애니메이션 구현하기

CSS에서 flex-basis 속성은 플렉스 컨테이너 안에서 각 아이템이 차지하는 기본 크기를 지정하는 속성입니다. 이 속성에 애니메이션을 적용하면 화면 로딩 시 또는 반복적으로 요소의 너비가 부드럽게 늘어나고 줄어드는 시각적 효과를 만들 수 있습니다.

flex-basis에 애니메이션을 적용하려면 CSS의 @keyframes 규칙을 사용하면 됩니다. 아래 예제는 4초 주기로 무한 반복되는 애니메이션을 통해 Q4 항목의 크기가 변화하는 모습을 보여줍니다.

예제 코드

<!DOCTYPE html>
<html>
<head>
<style>
    .box {
        display: flex;
        background-color: green;
    }
    .box > 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 {
        50% {
            flex-basis: 100px;
        }
    }
</style>
</head>
<body>
    <h1>Quiz</h1>
    <div class = "box">
        <div>Q1</div>
        <div>Q2</div>
        <div>Q3</div>
        <div style = "flex-basis: 350px">Q4</div>
        <div>Q5</div>
        <div>Q6</div>
        <div>Q7</div>
        <div>Q8</div>
        <div>Q9</div>
    </div>
</body>
</html>

코드 설명

.box 클래스에는 display: flex가 적용되어 있어, 내부의 자식 요소들이 플렉스 레이아웃으로 배치됩니다.

@keyframes myanim 규칙은 애니메이션의 중간 지점(50%)에서 flex-basis: 100px를 적용하도록 정의되어 있습니다. 이 규칙이 모든 div 요소에 animation: myanim 4s infinite 형태로 적용되므로, 각 항목은 4초를 주기로 크기가 반복적으로 변하게 됩니다.

특히 Q4 항목에는 인라인 스타일로 flex-basis: 350px가 지정되어 있어, 다른 항목보다 훨씬 넓은 공간을 차지하다가 애니메이션이 진행됨에 따라 그 크기가 역동적으로 변화하는 것을 확인할 수 있습니다.