css fade in on load code example

Example 1: css fade in and out popup

/* css fade in and out popup  */
<style>
.fadePop {
	display: block;           /* make sure your div is there */
	opacity: 0;               /* make sure you can't see it yet */
	visibility: visible;      /* make sure its visible when opacity will be 1 */
	animation-name: doAnim;   /* make reference to the keyframes below */
	animation-delay: 5s;	  /* wait 5 seconds to start animation */
	animation-duration: 6s;   /* make keyframes run for 6 seconds */
}
@-webkit-keyframes doAnim{
  0%   {opacity:0;}           /* start out transparent */
  25%  {opacity:1;}           /* at 25% finished fade into visible */
  50%  {opacity:1;}           /* stay visible -probably could delete this line */
  75%  {opacity:1;}           /* at 75% start fade into invisible */
  100% {opacity:0;}           /* at 100% finished fade into invisible */
}
</style>
<div class="fadePop">Modal popup here</div> /* class starts animation */
/*
lets face it - this saved you an hour of your time...
therefore please donate $5 if this code helped you to 
https://www.paypal.com/paypalme/andrewdhyder
*/

Example 2: css fade out

/* Answer to: "css fade out" */

/*
  With the code below, all you have to do is use JavaScript to
  give the element ".hide-opacity" and it'll fade-out.

  Feel free to edit this code so it works on hover, focus, active
  or any other special selector possible with CSS and of course
  feel free to use this code with your JavaScript too!
*/

.successfully-saved {
    color: #FFFFFF;
    text-align: center;

    -webkit-transition: opacity 3s ease-in-out;
    -moz-transition: opacity 3s ease-in-out;
    -ms-transition: opacity 3s ease-in-out;
    -o-transition: opacity 3s ease-in-out;
     opacity: 1;
}

.successfully-saved.hide-opacity {
    opacity: 0;
}