ui/css/fade-out.css

/***********************************************/
/* 이미지 사라지는 애니메이션 */
/***********************************************/
/* CSS for fade-out animation */
.fade-out {
  animation: fadeOutAndShrink 1s forwards;
  /* Add these properties to ensure smooth animation */
  transform-origin: center;
  display: inline-block;
}

@keyframes fadeOutAndShrink {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0);
  }
}

/* Optional: Add this if you want to keep the layout space after element disappears */
.fade-out.preserve-space {
  visibility: hidden;
  opacity: 0;
  animation: fadeOutAndShrinkPreserve 1s forwards;
}

@keyframes fadeOutAndShrinkPreserve {
  0% {
    opacity: 1;
    transform: scale(1);
    visibility: visible;
  }
  99% {
    transform: scale(0.01);
    opacity: 0;
    visibility: visible;
  }
  100% {
    transform: scale(0);
    opacity: 0;
    visibility: hidden;
  }
}