هدر شناور

سلام به همه شما دو ستان عزیز
دوستان در حال طراحی سایتی هستم که دمو در آدرس زیر است این هدر رو میخوام به صورت شناور به حالت fixed با انیمیشن ببرم و با انیمیشن خارج کنم ورود در سایت زیر درست هستش اما خروج رو نتونستم به صورت انیمیشن ایجاد کنم لطفا منبع درستی به من معرفی کنید که بتونم هدرم رو درست و بهینه شناور کنم
کد html :

<header>
    <div id="fixed" class="header">
</div>

کد js:

const headers = document.querySelector(".header,.header2,.header3");
const toggleClasss = "is-sticky";
window.addEventListener("scroll", () => {
    const currentScroll = window.pageYOffset;
    if (currentScroll > 150) {
        headers.classList.add(toggleClasss);
    }
    else {
        headers.classList.remove(toggleClasss);
    }
});

کد css :

.header.is-sticky, .header2.is-sticky, .header3.is-sticky {
    position: fixed;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.1);
    top: 0;
    animation: slideDown 0.35s ease-in-out;
    background: #fff;
}

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