Как можно анимировать исчезование Preloader?

Как можно реализовать плавное исчезновение Preloader? Например как бы приоткрыть шторку (чтобы Preloader исчезал снизу вверх)

export default function Preloader() {
    return (

    <div className="loading-page" >

<div className='animate-fade-down animate-duration-[1500ms] grid place-items-center mb-40'>
<img/>

<div className="name-container grid place-items-center text-center">
            <div className=""><p className='logo-name'>PRELOADER</p></div>
        </div>
        </div>
    </div>
    )
}

const [isLoading, setIsLoading] = useState(true)
useEffect(() => {
  setTimeout(() => {
    setIsLoading(false);
  }, 4000);
})

  return ( 
    <div>
{isLoading ? (<Preloader/>) : (<div></div>)

Я попробовал добавить анимации, но через 3.65 секунд, когда начинается анимация, у меня спускается белый лист вниз и смещает мой Preloader вниз, всё как и надо. Но как мне сделать, чтобы этот белый лист был прозрачный и мой сайт был виден, когда прелоадер начинает смещаться вниз?

@keyframes slideInTop {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.loading-page {
  animation-name: slideInTop;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 3.65s;
  animation-iteration-count: 1;
  animation-direction: reverse;
  animation-fill-mode: none;
}