"modal animation"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="wrapper"> <div class="container"> <div class="btn open"> Click Me! </div> <div class="circle"></div> <div class="modal"> <div class="modal-container"> <div class="title"> The More You Know <i class="fa fa-times close"></i> </div> <div class="copy"> Modals are a great way to give your user access to additional or supporting information without taking up extra space on the page. This swing out modal is animated with SASS, with a little jQuery to help out with clicked states. </div> <div class="btn close"> Continue </div> </div> </div> </div> </div> <script> $( ".open" ).click(function() { $(".modal").removeClass("out"); $(".modal").addClass("in"); setTimeout(function() { $(".modal").css("z-index", "1000"); $(".modal").css("height", "250px"); $(".modal").css("width", "550px"); $(".modal").css("padding", "20px"); }, 700); setTimeout(function() { $(".modal-container").fadeIn("slow"); }, 900); $(".circle").addClass("circle-active"); setTimeout(function() { $(".circle").removeClass("circle-active"); $(".circle").addClass("circle-hide"); }, 800); }); $( ".close" ).click(function() { $(".modal-container").fadeOut("fast"); $(".circle").removeClass("circle-hide"); setTimeout(function() { $(".modal").removeClass("in"); $(".modal").addClass("out"); }, 150); setTimeout(function() { $(".modal").css("z-index", "0"); $(".modal").css("height", "0"); $(".modal").css("width", "0"); $(".modal").css("padding", "0"); }, 150); }); </script>
@import url(https://fonts.googleapis.com/css?family=Varela+Round); .btn.open, .modal .btn.close, .circle, .modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } * { box-sizing: border-box; } html, body { height: 100%; width: 100%; background: #1e1e1e; overflow: hidden; } body { font-family: 'Varela Round', sans-serif; } .btn.open, .modal .btn.close { color: whitesmoke; width: 250px; height: 70px; background: #F47265; text-align: center; font-size: 30px; font-weight: bold; padding: 22px 0; border-radius: 3px; box-shadow: 0 8px 0 0 #e84d3e; cursor: pointer; transition: all .3s ease; z-index: 5; } .btn.open:hover, .modal .btn.close:hover { box-shadow: 0 5px 0 0 #e74535; margin-top: 3px; } .btn.open:active, .modal .btn.close:active { box-shadow: 0 0 0 0 #e53423; margin-top: 8px; } .circle { border-radius: 100%; height: 2px; width: 2px; background: #F47265; opacity: .3; z-index: 2; transition: all .8s ease; } .modal { background: #ECECEC; border-radius: 3px; box-shadow: 0 8px 0 0 #bebebe; padding: 0; } .modal .title { color: #4E9CFF; font-size: 28px; font-weight: bold; margin-top: -5px; padding: 10px 15px 10px 20px; border-bottom: 5px solid #4E9CFF; margin: -15px -20px 12px; } .modal .title i { float: right; color: #1e1e1e; opacity: .3; transition: all .2s ease; cursor: pointer; } .modal .title i:hover { opacity: .5; } .modal .copy { float: none; clear: both; font-size: 16px; } .modal .copy { line-height: 1.3; } .modal .btn.close { top: 78%; height: 50px; padding: 15.5px; font-size: 24px; background: #6dadff; box-shadow: 0 8px 0 0 #4E9CFF; cursor: pointer; transition: all .3s ease; } .modal .btn.close:hover { box-shadow: 0 5px 0 0 #4496ff; margin-top: 3px; } .modal .btn.close:active { box-shadow: 0 0 0 0 #2f8bff; margin-top: 8px; } .modal-container { display: none; } .in { animation: in 1s ease; } .out { animation: out 1s ease; } @keyframes in { 0% { height: 0; width: 0; z-index: 0; } 30% { top: 20%; z-index: 0; } 60% { z-index: 1000; } 100% { top: 50%; z-index: 1000; height: 250px; width: 550px; } } @keyframes out { 0% { top: 50%; z-index: 1000; height: 250px; width: 550px; } 30% { top: 80%; z-index: 1000; padding: 0; } 60% { z-index: 0; } 90%, 100% { height: 0; width: 0; z-index: 0; } } .circle-active { height: 700px; width: 700px; opacity: 0; } .circle-hide { opacity: 0 !important; }

Related: See More


Questions / Comments: