css fade in andf fade out code example

Example 1: css fade out

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

.fade-out {
	animation: fadeOut 2s;
  	opacity: 0;
}

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

Example 2: css fade in and stay

.fadePopInAndStay {
	display: block;
	opacity: 0;
	visibility: visible;
	animation-name: doAnimStay;
	animation-duration: 2s;
	animation-fill-mode: forwards;/* Makes it stay after animation */
}
@-webkit-keyframes doAnimStay{
  0%   {opacity:0;}
  100% {opacity:1;}
}

Tags:

Css Example