CSS @starting-style과 transition-behavior, 모달 애니메이션은 어떻게 처리할까?

홈페이지에서 모달 팝업이나 드롭다운 메뉴를 만들 때, 단순히 보이고 숨기는 동작만으로는 화면이 딱딱하게 느껴질 수 있습니다. 버튼을 눌렀을 때 창이 갑자기 나타나기보다, 살짝 떠오르거나 투명도가 부드럽게 바뀌면 사용자가 화면 변화를 더 자연스럽게 인식할 수 있습니다.

하지만 display: none 상태였다가 화면에 나타나는 요소는 일반적인 transition만으로 애니메이션을 주기 어렵습니다. 이럴 때 확인해볼 수 있는 CSS 기능이 @starting-style과 transition-behavior입니다.

특히 dialog, popover, 드롭다운 메뉴처럼 처음에는 보이지 않다가 사용자 행동에 따라 열리는 UI를 다룰 때 참고할 수 있습니다.

display none에서는 왜 애니메이션이 어려울까요?

기존에는 팝업이나 드롭다운을 숨길 때 아래처럼 display: none을 자주 사용했습니다.

.modal {
    display: none;
}

.modal.is-active {
    display: block;
}

이 방식은 간단하지만, display가 바뀌는 순간 요소가 바로 나타나기 때문에 부드러운 전환을 만들기 어렵습니다.

예를 들어 아래처럼 opacity와 transform을 넣어도 기대한 것처럼 자연스럽게 열리지 않을 수 있습니다.

.modal {
    display: none;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.3s, transform 0.3s;
}

.modal.is-active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

코드만 보면 부드럽게 보일 것 같지만, 실제로는 display: none 상태에서 요소가 화면에 없다가 바로 표시되기 때문에 애니메이션이 생략되는 경우가 있습니다.

기존 방식은 어떻게 처리했을까요?

실무에서는 보통 display 대신 opacity, visibility, pointer-events를 조합해 팝업 효과를 만들었습니다.

.modal {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity 0.3s, transform 0.3s;
}

.modal.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

이 방식은 여전히 많이 사용됩니다. 브라우저 지원 범위를 넓게 가져가야 하거나, 기존 템플릿 구조를 안정적으로 유지해야 한다면 충분히 현실적인 방법입니다.

다만 요소가 화면에는 남아 있기 때문에 클릭 가능 여부, 접근성 상태, 스크립트 제어를 함께 신경 써야 합니다.

@starting-style은 어떤 역할을 할까요?

@starting-style은 요소가 처음 화면에 표시될 때의 시작 스타일을 지정하는 CSS 규칙입니다.

예를 들어 모달이 열릴 때 최종 상태는 opacity: 1, transform: translateY(0)이지만, 시작할 때는 opacity: 0, transform: translateY(12px)에서 출발하도록 알려줄 수 있습니다.

.modal[open] {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

@starting-style {
    .modal[open] {
        opacity: 0;
        transform: translateY(12px);
    }
}

이렇게 작성하면 요소가 처음 열릴 때 어떤 상태에서 시작해야 하는지 CSS 안에서 더 명확하게 표현할 수 있습니다. dialog처럼 open 속성이 붙으면서 표시되는 요소나, popover처럼 사용자 동작에 따라 열리는 UI에서 활용하기 좋습니다.

transition-behavior는 왜 함께 볼까요?

transition-behavior는 일반적인 숫자 변화처럼 중간값을 만들기 어려운 속성의 전환을 다룰 때 확인하는 CSS 속성입니다.

opacity는 0에서 1로 자연스럽게 바뀔 수 있지만, display는 none과 block 사이에 중간값이 있는 속성이 아닙니다. 그래서 display처럼 전환이 까다로운 속성을 함께 다룰 때 transition-behavior: allow-discrete;를 검토할 수 있습니다.

.modal {
    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        display 0.3s allow-discrete;
    transition-behavior: allow-discrete;
}

다만 이 방식은 최신 CSS 기능에 가깝기 때문에 실제 적용 전 브라우저 지원과 동작 차이를 확인하는 것이 좋습니다.

dialog와 popover 애니메이션에 활용할 수 있을까요?

dialog 모달은 open 상태를 기준으로 애니메이션을 줄 수 있습니다.

.modal {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        display 0.3s allow-discrete;
    transition-behavior: allow-discrete;
}

.modal[open] {
    opacity: 1;
    transform: translateY(0);
}

@starting-style {
    .modal[open] {
        opacity: 0;
        transform: translateY(16px);
    }
}

popover도 열린 상태를 기준으로 비슷하게 처리할 수 있습니다.

.info-popover {
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        display 0.25s allow-discrete;
    transition-behavior: allow-discrete;
}

.info-popover:popover-open {
    opacity: 1;
    transform: translateY(0);
}

@starting-style {
    .info-popover:popover-open {
        opacity: 0;
        transform: translateY(8px);
    }
}

이 방식은 모달, 드롭다운, 안내창처럼 열리고 닫히는 UI를 더 자연스럽게 보여줄 때 도움이 됩니다.

적용 전 확인할 부분

모달 애니메이션은 예쁜 효과보다 사용성이 먼저입니다. 너무 긴 애니메이션은 사용자의 행동을 늦추고, 너무 강한 움직임은 화면 집중을 방해할 수 있습니다.

적용 전에는 아래 내용을 확인하는 것이 좋습니다.

특히 문의 팝업, 예약 확인창, 약관 안내처럼 사용자의 행동과 연결되는 모달은 화려한 효과보다 명확한 구조가 더 중요합니다.

자주 묻는 질문

모달 애니메이션은 안정성이 먼저입니다

모달이나 드롭다운 애니메이션은 화면을 더 자연스럽게 만드는 요소입니다. 하지만 애니메이션이 없어도 사용자가 내용을 확인하고, 버튼을 누르고, 창을 닫을 수 있어야 합니다.

@starting-style은 처음 표시되는 요소의 시작 상태를 지정하는 데 도움이 되고, transition-behavior는 display처럼 전환이 까다로운 속성을 다룰 때 함께 검토할 수 있습니다.

디자인키트의 HTML 템플릿이나 웹디자인 소스를 수정할 때도 팝업, 안내창, 드롭다운, 카드 오버레이처럼 열리고 닫히는 UI를 확인할 일이 있습니다. 이때 기존 방식과 최신 CSS 기능의 차이를 이해하면 템플릿 구조를 무리하게 바꾸지 않고도 더 자연스러운 전환 효과를 검토할 수 있습니다.