"Animated PopUp , Animated subscribe popup, animated alert box in css"
Bootstrap 4.0.0 Snippet by RAJKUMAR123

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <body class="pop-up"> <div id="pop-up"> <!-- <img src="images/cross.png"> --> <div class="container"> <h1>SUBSCRIBE OUR WEBSITE</h1> <p>This Designe By <strong>RAJ KUMAR</strong> Enter your E-mail and animated subscribe form.</p> <input type="email" placeholder="email" required> <button>SEND</button> <div class="cross" ><i class="fa fa-times" style="color: #fff;"></i></div> </div> </div> </body>
body{ margin: 0; position: relative; } body.pop-up{ background-color: #222; } *{ font-family: calibri, sans-serif; font-weight: normal; color: #333333; } h1{ font-size: 40px; margin: 10px 0px; } p{ margin-bottom: 40px; } #pop-up{ position: relative; top: 100px; width: 500px; margin: 0 auto; text-align: center; } #pop-up .container{ background-color: #f0e4d4; padding:30px; position: absolute; top:50px; width:100%; box-sizing:border-box; } #pop-up input{ padding: 10px; border: 0; border-radius: 10px 0 0 10px; border: 1px solid #333; font-size: 18px; } button{ padding: 10px; border: 0; color: #fff; background-color: #333; margin-left: -5px; border-radius: 0 10px 10px 0; border: 1px solid #333; font-size: 18px; } .cross{ position: absolute; top: 10px; left: 10px; background-color: #555; color: #ddd; font-weight: bold; width: 22px; height: 22px; text-align: center; border-radius: 11px; } /* ANIMATED POP-UP Style */ #pop-up{ transform-origin: 10px 10px; top: -400px; animation: drop 0.5s ease forwards, swing 2s 3s ease forwards; } @keyframes drop{ 0%{opacity: 0;} 70%{ transform: translateY(650px);} 100%{transform: translateY(400px); opacity: 1;} } @keyframes swing{ 0%{transform: translateY(400px) rotateZ(0deg);} 40%{transform: translateY(400px) rotateZ(90deg);} 70%{transform: translateY(400px) rotateZ(70deg);} 100%{transform: translateY(400px) rotateZ(75deg);} } /* ANIMATED POP-UP Style */

Related: See More

Paper Kit 2
Animated Radio tab
Animated 3d social icon in css3
Bootstrap 4 Animated Dynamic Form

Questions / Comments: