popup show with fade in css code example

Example: 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
*/

Tags:

Css Example

Recent Posts