CSS 애니메이션으로 숨겨진 요소 자연스럽게 드러내는 방법

CSS 애니메이션으로 숨겨진 요소 드러내기

CSS 애니메이션은 단순한 장식 효과를 넘어, 화면에 보이지 않던 요소를 역동적으로 드러내는 강력한 수단입니다. opacity 속성과 @keyframes 규칙, :hover 가상 클래스를 조합하면 마우스를 올리는 순간 숨겨진 요소가 자연스럽게 나타나는 인터랙티브한 연출을 손쉽게 구현할 수 있습니다.

아래 예제에서는 원형의 붉은 요소(.demo)에 마우스를 올리면, 그 옆에 숨겨져 있던 막대 모양의 요소(.hidden-one)가 이동하면서 서서히 모습을 드러냅니다.

핵심 동작 원리

투명 상태로 초기화 — 숨길 요소는 opacity: 0으로 설정하여 처음에는 화면에 보이지 않도록 합니다.
@keyframes로 등장 장면 정의 — 애니메이션의 각 구간(0%, 50%, 100%)에서 위치(left, top), 투명도(opacity), 쌓임 순서(z-index)를 단계적으로 변화시켜 요소가 이동하며 등장하는 효과를 만듭니다.
:hover로 애니메이션 실행 — 부모 요소(.item)에 마우스를 올리면 자식 요소들의 애니메이션이 한꺼번에 트리거됩니다.
3D 효과 추가 — perspective와 rotate3d()를 활용해 붉은 원이 입체적으로 회전하는 모션을 더했습니다.

예제 코드

<!DOCTYPE html>
<html>
<style>
.item {
    position: relative;
    perspective: 1000px;
}
.demo, .hidden-one {
    background: lightgreen;
    box-shadow: 0 5px 12px rgba(0,0,0,0.6);
}
.item:hover .hidden-one {
    animation: yoyo 1.4s backwards ease;
}
.item:hover .demo {
    animation: yo 1s ease;
}
.demo {
    position: absolute;
    height: 150px;
    width: 150px;
    background-color: firebrick;
    border-radius: 50%;
    left: 100px;
    top: 50px;
    z-index: 2;
}
.hidden-one {
    background-color: #880;
    border-radius: 3px;
    height: 120px;
    width: 55px;
    position: absolute;
    left: 280px;
    top: 140px;
    opacity: 0;
    transition: opacity 0.8s;
}
@keyframes yoyo {
    0% {
        top: 140px;
        opacity: 0;
        left: 70px;
        z-index: 1;
    }
    50% {
        left: 12px;
        opacity: 1;
        z-index: 2;
        top: 140px;
    }
    100% {
        opacity: 1;
        left: 150px;
        z-index: 3;
    }
}
@keyframes yo {
    0% {
    }
    30% {
        transform: rotate3D(-1,1,0.1,10deg) scale(1.05);
    }
    50% {
        transform: rotate3D(1,-1,0.1,10deg) scale(1.05);
    }
    100% {
    }
}
</style>
<body>
<div class="item">
<div class="hidden-one"></div>
<div class="demo"></div>
</div>
</body>
</html>

실행 결과

위 코드를 브라우저에서 실행한 뒤 요소 위에 마우스를 올리면 다음과 같은 결과를 확인할 수 있습니다.

① 초기 상태 — 붉은 원형 요소만 화면에 표시되고, 막대 요소는 opacity: 0 덕분에 완전히 투명한 상태로 숨겨져 있습니다.

CSS 애니메이션으로 숨겨진 요소 자연스럽게 드러내는 방법

② 마우스 오버 — 붉은 원이 3D 회전하며 좌우로 기울어지고, 동시에 숨겨진 막대 요소가 왼쪽에서 이동하기 시작하며 점점 선명해집니다.

CSS 애니메이션으로 숨겨진 요소 자연스럽게 드러내는 방법

③ 애니메이션 완료 — 막대 요소가 완전히 불투명해지고 z-index 값이 높아져 원형 요소보다 앞쪽에 배치되며, 최종 위치에서 자연스럽게 자리 잡습니다.

CSS 애니메이션으로 숨겨진 요소 자연스럽게 드러내는 방법

이처럼 opacity 전환과 @keyframes 애니메이션을 함께 활용하면 별도의 JavaScript 없이도 순수 CSS만으로 생동감 있는 요소 등장 효과를 만들 수 있습니다.