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

css fade div

ol {
  border   : 1px #d8d8d8 dashed;
  position : relative;
}

ol:after {
  content  : "";
  position : absolute;
  z-index  : 1;
  bottom   : 0;
  left     : 0;
  pointer-events   : none;
  background-image : linear-gradient(to bottom, 
                    rgba(255,255,255, 0), 
                    rgba(255,255,255, 1) 90%);
  width    : 100%;
  height   : 4em;
}