CSS

how to add fade-in with page transition

body {
    animation: fadeInAnimation ease 0.4s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}

fade in transition css

//javascript - onclick
     function Filter() {
            console.log("ssdsd");
            var filter = document.getElementById("filter");
            filter.classList.add("slide")
      }

// css
.filter-container {   
        background-color: rgb(184, 172, 172);
        padding: 10px;
        border-radius: 0px 0px 10px 10px;
        top: -300;
        opacity: 0;
        /* visibility: hidden; */
        transition: top 500ms ease-in-out, opacity 800ms;

   
    }

    .slide {
        z-index: 10;
        top: 20;
        opacity: 1;
    }