CODE EXAMPLE FOR CSS

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;
    }