css fade in and out popup

Solutions on MaxInterview for css fade in and out popup by the best coders in the world

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