CSS z-index 속성 애니메이션이란?
CSS에서 z-index 속성은 요소의 쌓임 순서(stacking order)를 결정합니다. 일반적으로 z-index는 순간적으로 값이 바뀌는 속성이지만, @keyframes 규칙과 animation 속성을 조합하면 애니메이션 중간 단계에서 z-index 값을 변경하여 요소가 다른 요소들 위로 올라오거나 뒤로 내려가는 효과를 만들 수 있습니다.
아래 예제 코드를 실행하면 coral 색상의 데모 박스가 3초 동안 진행되는 애니메이션 과정에서 z-index 값이 1에서 3으로 변경되는 것을 확인할 수 있습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
div {
position: absolute;
}
#box div {
background-color: orange;
border: 2px solid yellow;
width: 100px;
height: 100px;
opacity: 0.3;
}
div#demo {
opacity: 1;
background-color: coral;
z-index: 1;
animation: myanim 3s;
}
@keyframes myanim {
30% {
z-index: 3;
}
}
</style>
</head>
<body>
<h1>CSS z-index 속성</h1>
<div id = "box">
<div id = "demo"></div>
<div style = "top:20px;left:20px;z-index:1;">One</div>
<div style = "top:40px;left:40px;z-index:2;">Two</div>
<div style = "top:60px;left:60px;z-index:3;">Three</div>
<div style = "top:80px;left:80px;z-index:4;">Four</div>
<div style = "top:100px;left:40px;z-index:5;">Five</div>
<div style = "top:120px;left:60px;z-index:6;">Six</div>
<div style = "top:140px;left:80px;z-index:7;">Seven</div>
</div>
</body>
</html>코드 작동 원리 살펴보기
1. 기본 스타일 설정
모든 div 요소에 position: absolute;를 적용했습니다. z-index 속성은 position 속성값이 static이 아닌 요소(position: relative, absolute, fixed, sticky)에만 적용되기 때문에 이 설정이 반드시 필요합니다.
2. 박스 스타일링
#box div 선택자는 컨테이너 안의 모든 자식 div에 주황색 배경, 노란색 테두리, 100×100px 크기, 그리고 0.3의 불투명도(opacity)를 지정합니다. 반투명하게 처리한 이유는 여러 박스가 겹쳐 있는 상태를 시각적으로 명확하게 보여주기 위함입니다.
3. 애니메이션 정의
div#demo 요소에는 coral 색상 배경과 z-index: 1이 기본값으로 설정되어 있으며, animation: myanim 3s;를 통해 3초 길이의 애니메이션이 실행됩니다.
@keyframes myanim 규칙에서는 애니메이션이 30% 지점에 도달했을 때 z-index 값을 3으로 변경하도록 정의했습니다. 즉, 애니메이션 시작 후 약 0.9초가 지난 시점부터 데모 박스의 쌓임 순서가 위로 올라갑니다.
참고 사항
- z-index는 정수(integer) 값을 사용하므로 부드러운 보간(interpolation) 없이 단계적으로 값이 전환됩니다.
- 애니메이션 종료 후 원래 상태로 되돌아가길 원한다면
animation-fill-mode속성을 활용할 수 있습니다. - 무한 반복 애니메이션이 필요하다면
infinite키워드를 추가하세요. 예:animation: myanim 3s infinite;
이처럼 CSS만으로도 z-index 속성에 애니메이션을 적용해 요소 간 겹침 순서를 동적으로 제어할 수 있습니다.