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