[CSS] z-index에 딜레이 적용시키기

 

코드

 

 

코드 풀이

.zIndexDelay {
  animation: zIndex .5s step-end forwards; 
}

@keyframes zIndexDelay {
  to { 
    z-index: 5; 
  }
}

animation-timing-function의 step-end 속성을 이용해서 keyframes의 진행상태가 끝났을 때 적용되도록 지정해줍니다. to 영역에 지정된 z-index가 지정된 애니메이션의 duration 만큼 진행된 후에 적용됩니다.

 

 

JavaScript 사용하여 구현하기

.zIndex {
  z-index: 22;
}

CSS로 z-index 속성 값이 적용된 클래스를 정의해줍니다.

 

setTimeout(() => {
  요소.classList.add("zIndex");
}, 1000);

JS의 setTimeout 함수로 딜레이를 준 후 클래스를 추가해 z-index를 적용시켜줍니다.