"animation-types"
Bootstrap 4.0.0 Snippet by mrservon22

<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 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 ----------> <!DOCTYPE html><html class=''> <head> <script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/mattrothenberg/pen/EKXWpr?depth=everything&order=popularity&page=37&q=Overlay&show_forks=false" /> <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'> </head> <body> <div class="container"> <div class="row"> <nav id="header"> <a id="menuToggle" href="#"> <i class="fa fa-bars fa-2x"></i> </a> </nav> <div class="wrap"> <div class="empty-state"> <h1>Select an animation style:</h1> <div class="animation-selector"> <select id="selectAnimation"> <optgroup label="Bouncing Entrances"> <option value="bounceIn">bounceIn</option> <option value="bounceInDown">bounceInDown</option> <option value="bounceInLeft">bounceInLeft</option> <option value="bounceInRight">bounceInRight</option> <option value="bounceInUp">bounceInUp</option> </optgroup> <optgroup label="Fading Entrances"> <option value="fadeIn">fadeIn</option> <option selected value="fadeInDown">fadeInDown</option> <option value="fadeInDownBig">fadeInDownBig</option> <option value="fadeInLeft">fadeInLeft</option> <option value="fadeInLeftBig">fadeInLeftBig</option> <option value="fadeInRight">fadeInRight</option> <option value="fadeInRightBig">fadeInRightBig</option> <option value="fadeInUp">fadeInUp</option> <option value="fadeInUpBig">fadeInUpBig</option> </optgroup> <optgroup label="Flippers"> <option value="flip">flip</option> <option value="flipInX">flipInX</option> <option value="flipInY">flipInY</option> <option value="flipOutX">flipOutX</option> <option value="flipOutY">flipOutY</option> </optgroup> <optgroup label="Lightspeed"> <option value="lightSpeedIn">lightSpeedIn</option> <option value="lightSpeedOut">lightSpeedOut</option> </optgroup> <optgroup label="Rotating Entrances"> <option value="rotateIn">rotateIn</option> <option value="rotateInDownLeft">rotateInDownLeft</option> <option value="rotateInDownRight">rotateInDownRight</option> <option value="rotateInUpLeft">rotateInUpLeft</option> <option value="rotateInUpRight">rotateInUpRight</option> </optgroup> <optgroup label="Sliding Entrances"> <option value="slideInUp">slideInUp</option> <option value="slideInDown">slideInDown</option> <option value="slideInLeft">slideInLeft</option> <option value="slideInRight">sl ideInRight</option> </optgroup> <optgroup label="Zoom Entrances"> <option value="zoomIn">zoomIn</option> <option value="zoomInDown">zoomInDown</option> <option value="zoomInLeft">zoomInLeft</option> <option value="zoomInRight">zoomInRight</option> <option value="zoomInUp">zoomInUp</option> </optgroup> </select> <i class="fa fa-caret-down"></i> </div> </div> </div> <section class="nav-modal"> <ul class="list-unstyled"> <li><a href="#">Link #1</a></li> <li><a href="#">Link #2</a></li> <li><a href="#">Link #3</a></li> <li><a href="#">Link #4</a></li> <li><a href="#">Link #5</a></li> <li><a href="#">Link #6</a></li> <li><a href="#">Link #7</a></li> <li><a href="#">Link #8</a></li> </ul> </section> </div> </div> </body> </html>
body, html {height: 100%;background: #F7F7F7;} body {font-family: "Roboto";-webkit-font-smoothing: antialiased;} body.nav-modal-active {overflow: hidden;} body.nav-modal-active .nav-modal {opacity: 1;} body.nav-modal-active nav a {color: white;} nav {padding: 15px;position: fixed;z-index: 11;top: 0;left: 0;right: 0;text-align: right;} nav a {color: #9e9e9e;-webkit-transition: color .25s ease-in-out;transition: color .25s ease-in-out;} nav a:hover, nav a:focus {color: #787878;} .wrap {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: 100%;} .empty-state {max-width: 100%;color: #b7b7b7;text-align: center;} .animation-selector {position: relative;width: auto;display: inline-block;} .animation-selector select {-webkit-appearance: none;-moz-appearance: none;appearance: none;padding: 5px 10px;background: transparent;border-color: #b7b7b7;border-radius: 0;color: #222;} .animation-selector i {position: absolute;top: 9px;right: 10px;} .nav-modal {position: fixed;z-index: 10;top: 0;left: 0;right: 0;bottom: 0;height: 100%;width: 100%;padding: 50px 25px 0;background: rgba(1, 169, 237, 0.85);opacity: 0;-webkit-transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);} .nav-modal li {font-size: 2em;font-weight: bold;margin: 0 0 .5em 0;} .nav-modal li a {color: white;display: block;-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
var body = $("body"); var header = $("#header"); var menuToggle = $("#menuToggle"); var menuToggleIcon = $('#menuToggle i'); var navModal = $(".nav-modal"); var navModalLinks = $(".nav-modal li a"); var navModalIsOpen = false; var MODAL_ACTIVE_CLASS = 'nav-modal-active'; var hamburgerIconString = 'fa-bars'; var closeMenuIconString = 'fa-times'; var select = $('#selectAnimation'); var defaultAnimation = $("#selectAnimation option:selected").val(); init(); function init() { // Apply inline style to <navModal> so that animation gets triggered on first click of `menuToggle`. navModal.css('display', 'none'); // Set up staggered animation on modal nav items navStagger(); // Apply default animation applyAnimationType(defaultAnimation); // Observe future changes to <select> watchSelectChanges(); } menuToggle.on('click', function(e) { toggleMenu(e); }) function applyAnimationType(type) { navModalLinks.removeClass(); navModalLinks.addClass(type); } function watchSelectChanges() { select.on('change', function(e) { var val = this.value; applyAnimationType(val); }) } function navStagger() { navModalLinks.each(function(index, value) { $(value).css('animation-delay', index * .1015 + 's'); }) } function showMenu() { menuToggleIcon.removeClass(hamburgerIconString); menuToggleIcon.addClass(closeMenuIconString); navModal.css('display', 'block'); setTimeout(function() { navModalIsOpen = true; body.addClass(MODAL_ACTIVE_CLASS); }, 10); } function hideMenu() { navModalIsOpen = false; navModal.css('display', 'none'); } function toggleMenu(e) { e.preventDefault(); if (navModalIsOpen) { body.removeClass(MODAL_ACTIVE_CLASS); onTransitionEnd(navModal, hideMenu, 300); menuToggleIcon.removeClass(closeMenuIconString); menuToggleIcon.addClass(hamburgerIconString); } else { showMenu(); } } function onKeyUp(e) { if (e.keyCode === 27 && navModalIsOpen) { toggleMenu(e); } } $(document).on('keyup', onKeyUp); function onTransitionEnd($el, callback, fallbackDuration) { if ($.support.transition && $.support.transition.end) { $el.one($.support.transition.end, callback).emulateTransitionEnd(fallbackDuration); } else { setTimeout(callback, fallbackDuration); } }

Related: See More


Questions / Comments: