display fade in css code example

Example 1: css fade in

/* Just add .fade-in class to element */

.fade-in {
	animation: fadeIn 2s;
  	opacity: 1;
}

@keyframes fadeIn {
  from {
  	opacity: 0;
  }
  to {
 	opacity: 1;
  }
}

Example 2: display transition css

div {
  background-color: blue;
  padding: 40px;
  color: white;
  cursor: pointer;
  transition: all .1s ease;
}

.hidden {
  visibility: hidden;
  opacity: 0;
  max-height: 0%;
}

.hidden:hover {
  visibility: visible;
  opacity: 1;
  max-height: 1000px;
}
<div class="hidden"></div>

Example 3: 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;
}