"full screen menu animation"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <h1> hello world </h1> <div class="button_container" id="toggle"> <span class="top"></span> <span class="middle"></span> <span class="bottom"></span> </div> <div class="overlay" id="overlay"> <nav class="overlay-menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Work</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </div> <script> var el = document.querySelector('#toggle'); var ovrlays = document.querySelector('#overlay'); el.onclick = function () { el.classList.toggle('active'); ovrlays.classList.toggle('open'); } </script>
@import url(https://fonts.googleapis.com/css?family=Vollkorn|Roboto); body { background: #F5F5F5; } .container { position: absolute; width: 100%; heigh: 100%; text-align: center; top: 40%; left: 0; margin: 0 auto; font-family: 'Roboto', sans-serif; } .container p { font-size: 20px; } .container a { display: inline-block; position: relative; text-align: center; color: #FF5252; text-decoration: none; font-size: 20px; overflow: hidden; top: 5px; } .container a:after { content: ''; position: absolute; background: #FF5252; height: 2px; width: 0%; -webkit-transform: translateX(-50%); transform: translateX(-50%); left: 50%; bottom: 0; transition: .35s ease; } .container a:hover:after { width: 100%; } h1 { position: relative; text-align: center; font-family: 'Vollkorn', sans-serif; } .button_container { position: fixed; top: 5%; right: 2%; height: 27px; width: 35px; cursor: pointer; z-index: 100; transition: opacity .25s ease; } .button_container:hover { opacity: .7; } .button_container.active .top { -webkit-transform: translateY(10px) translateX(0) rotate(45deg); transform: translateY(10px) translateX(0) rotate(45deg); background: #FFF; } .button_container.active .middle { opacity: 0; background: #FFF; } .button_container.active .bottom { -webkit-transform: translateY(-10px) translateX(0) rotate(-45deg); transform: translateY(-10px) translateX(0) rotate(-45deg); background: #FFF; } .button_container span { background: #FF5252; border: none; height: 2px; width: 100%; position: absolute; top: 0px; left: 0; transition: all .35s ease; cursor: pointer; } .button_container span:nth-of-type(2) { top: 10px; } .button_container span:nth-of-type(3) { top: 20px; } .overlay { pointer-events: none; z-index: 998; position: fixed; height: 100vh; width: 100%; top: 0; left: 0; padding: 104px 0; overflow: hidden; } .overlay nav { pointer-events: none; z-index: 998; position: fixed; height: 100vh; width: 100%; top: 0; left: 0; padding: 104px 0; } .overlay.open nav { pointer-events: auto; } .overlay:before { content: ''; z-index: 1; position: absolute; height: 100vh; width: calc(50vw - 8px); background: #000; top: 0; left: 0; opacity: 0; -webkit-transform-origin: left; transform-origin: left; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: opacity 0ms ease 500ms, -webkit-transform 500ms cubic-bezier(0.42, 0, 0.58, 1); transition: opacity 0ms ease 500ms, -webkit-transform 500ms cubic-bezier(0.42, 0, 0.58, 1); transition: opacity 0ms ease 500ms, transform 500ms cubic-bezier(0.42, 0, 0.58, 1); transition: opacity 0ms ease 500ms, transform 500ms cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 500ms cubic-bezier(0.42, 0, 0.58, 1); will-change: transform; } .overlay:after { content: ''; z-index: 1; position: absolute; height: 100vh; width: 50vw; background: #000; top: 0; left: 50%; opacity: 0; -webkit-transform-origin: left; transform-origin: left; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: opacity 0ms ease 500ms, -webkit-transform 500ms cubic-bezier(0.42, 0, 0.58, 1); transition: opacity 0ms ease 500ms, -webkit-transform 500ms cubic-bezier(0.42, 0, 0.58, 1); transition: opacity 0ms ease 500ms, transform 500ms cubic-bezier(0.42, 0, 0.58, 1); transition: opacity 0ms ease 500ms, transform 500ms cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 500ms cubic-bezier(0.42, 0, 0.58, 1); will-change: transform; } .overlay.open { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } .overlay { -webkit-transition: opacity 150ms ease; transition: opacity 150ms ease; opacity: 0; z-index: 2; position: relative; } .overlay.open:before, .overlay.open:after { webkit-transition: -webkit-transform 300ms cubic-bezier(0.19, 1, 0.22, 1); transition: -webkit-transform 300ms cubic-bezier(0.19, 1, 0.22, 1); transition: transform 300ms cubic-bezier(0.19, 1, 0.22, 1); transition: transform 300ms cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 300ms cubic-bezier(0.19, 1, 0.22, 1); -webkit-transform: scaleX(1); transform: scaleX(1); opacity: .8; } /* .overlay-menu.open li { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } */ .overlay .overlay-menu ul li { -webkit-transform: translate3d(5px, 40px, 0); transform: translate3d(5px, 40px, 0); opacity: 0; -webkit-transition: opacity 0ms, -webkit-transform 0ms; transition: opacity 0ms, -webkit-transform 0ms; transition: transform 0ms, opacity 0ms; transition: transform 0ms, opacity 0ms, -webkit-transform 0ms; } .overlay.open li:nth-of-type(1) { -webkit-transition: opacity 1500ms cubic-bezier(0.19, 1, 0.22, 1) 550ms, -webkit-transform 1500ms cubic-bezier(0.19, 1, 0.22, 1) 575ms; transition: opacity 1500ms cubic-bezier(0.19, 1, 0.22, 1) 550ms, -webkit-transform 1500ms cubic-bezier(0.19, 1, 0.22, 1) 575ms; transition: transform 1500ms cubic-bezier(0.19, 1, 0.22, 1) 575ms, opacity 1500ms cubic-bezier(0.19, 1, 0.22, 1) 550ms; transition: transform 1500ms cubic-bezier(0.19, 1, 0.22, 1) 575ms, opacity 1500ms cubic-bezier(0.19, 1, 0.22, 1) 550ms, -webkit-transform 1500ms cubic-bezier(0.19, 1, 0.22, 1) 575ms; } .overlay.open .overlay-menu ul li:nth-of-type(2) { -webkit-transition: opacity 1500ms cubic-bezier(0.19, 1, 0.22, 1) 600ms, -webkit-transform 1500ms cubic-bezier(0.19, 1, 0.22, 1) 650ms; transition: opacity 1500ms cubic-bezier(0.19, 1, 0.22, 1) 600ms, -webkit-transform 1500ms cubic-bezier(0.19, 1, 0.22, 1) 650ms; transition: transform 1500ms cubic-bezier(0.19, 1, 0.22, 1) 650ms, opacity 1500ms cubic-bezier(0.19, 1, 0.22, 1) 600ms; transition: transform 1500ms cubic-bezier(0.19, 1, 0.22, 1) 650ms, opacity 1500ms cubic-bezier(0.19, 1, 0.22, 1) 600ms, -webkit-transform 1500ms cubic-bezier(0.19, 1, 0.22, 1) 650ms; } .overlay.open .overlay-menu ul li:nth-of-type(3) { -webkit-transition: opacity 1500ms cubic-bezier(0.19, 1, 0.22, 1) 650ms, -webkit-transform 1500ms cubic-bezier(0.19, 1, 0.22, 1) 725ms; transition: opacity 1500ms cubic-bezier(0.19, 1, 0.22, 1) 650ms, -webkit-transform 1500ms cubic-bezier(0.19, 1, 0.22, 1) 725ms; transition: transform 1500ms cubic-bezier(0.19, 1, 0.22, 1) 725ms, opacity 1500ms cubic-bezier(0.19, 1, 0.22, 1) 650ms; transition: transform 1500ms cubic-bezier(0.19, 1, 0.22, 1) 725ms, opacity 1500ms cubic-bezier(0.19, 1, 0.22, 1) 650ms, -webkit-transform 1500ms cubic-bezier(0.19, 1, 0.22, 1) 725ms; } .overlay.open .overlay-menu ul li:nth-of-type(4) { -webkit-transition: opacity 1500ms cubic-bezier(0.19, 1, 0.22, 1) 700ms, -webkit-transform 1500ms cubic-bezier(0.19, 1, 0.22, 1) 800ms; transition: opacity 1500ms cubic-bezier(0.19, 1, 0.22, 1) 700ms, -webkit-transform 1500ms cubic-bezier(0.19, 1, 0.22, 1) 800ms; transition: transform 1500ms cubic-bezier(0.19, 1, 0.22, 1) 800ms, opacity 1500ms cubic-bezier(0.19, 1, 0.22, 1) 700ms; transition: transform 1500ms cubic-bezier(0.19, 1, 0.22, 1) 800ms, opacity 1500ms cubic-bezier(0.19, 1, 0.22, 1) 700ms, -webkit-transform 1500ms cubic-bezier(0.19, 1, 0.22, 1) 800ms; } /* .overlay-menu ul { list-style: none; padding: 0; margin: 0 auto; display: inline-block; position: relative; height: 100%; } .overlay-menu ul li { -webkit-transform: translate3d(5px, 40px, 0); transform: translate3d(5px, 40px, 0); opacity: 0; -webkit-transition: opacity 0ms, -webkit-transform 0ms; transition: opacity 0ms, -webkit-transform 0ms; transition: transform 0ms, opacity 0ms; transition: transform 0ms, opacity 0ms, -webkit-transform 0ms; } */ /* .overlay ul li a:after { content: ''; position: absolute; width: 30px; height: 2px; top: 50%; left: 0px; background-color: #fff; -webkit-transform: scaleX(0) translate3d(100px, 0, 0); transform: scaleX(0) translate3d(100px, 0, 0); -webkit-transform-origin: right; transform-origin: right; -webkit-transition: -webkit-transform 300ms cubic-bezier(0.42, 0, 0.58, 1); transition: -webkit-transform 300ms cubic-bezier(0.42, 0, 0.58, 1); transition: transform 300ms cubic-bezier(0.42, 0, 0.58, 1); transition: transform 300ms cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 300ms cubic-bezier(0.42, 0, 0.58, 1); } .overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after { -webkit-transition: -webkit-transform 600ms cubic-bezier(0.19, 1, 0.22, 1); transition: -webkit-transform 600ms cubic-bezier(0.19, 1, 0.22, 1); transition: transform 600ms cubic-bezier(0.19, 1, 0.22, 1); transition: transform 600ms cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 600ms cubic-bezier(0.19, 1, 0.22, 1); -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } */ /* .overlay ul li a { webkit-transition: -webkit-transform 600ms cubic-bezier(0.19, 1, 0.22, 1); transition: -webkit-transform 600ms cubic-bezier(0.19, 1, 0.22, 1); transition: transform 600ms cubic-bezier(0.19, 1, 0.22, 1); transition: transform 600ms cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 600ms cubic-bezier(0.19, 1, 0.22, 1); -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } */ .overlay ul { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100vh; /* webkit-transition: -webkit-transform 600ms cubic-bezier(0.19, 1, 0.22, 1); transition: -webkit-transform 600ms cubic-bezier(0.19, 1, 0.22, 1); transition: transform 600ms cubic-bezier(0.19, 1, 0.22, 1); transition: transform 600ms cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 600ms cubic-bezier(0.19, 1, 0.22, 1); -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); */ /* position: relative; padding: 16px 20px; display: inline-block; font-family: "ModernMTStd-Wide", sans-serif; font-size: 32px; line-height: 1.2em; color: #fff; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); -webkit-transition: -webkit-transform 1500ms cubic-bezier(0.19, 1, 0.22, 1); transition: -webkit-transform 1500ms cubic-bezier(0.19, 1, 0.22, 1); transition: transform 1500ms cubic-bezier(0.19, 1, 0.22, 1); transition: transform 1500ms cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 1500ms cubic-bezier(0.19, 1, 0.22, 1); */ } .overlay-menu ul li a:hover, .overlay-menu ul li a:focus { -webkit-transition: -webkit-transform 600ms cubic-bezier(0.19, 1, 0.22, 1); transition: -webkit-transform 600ms cubic-bezier(0.19, 1, 0.22, 1); transition: transform 600ms cubic-bezier(0.19, 1, 0.22, 1); transition: transform 600ms cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 600ms cubic-bezier(0.19, 1, 0.22, 1); -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } .overlay-menu ul li a { position: relative; padding: 16px 20px; text-decoration: none; display: inline-block; font-size: 48px; line-height: 1.2em; color: #fff; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); -webkit-transition: -webkit-transform 1500ms cubic-bezier(0.19, 1, 0.22, 1); transition: -webkit-transform 1500ms cubic-bezier(0.19, 1, 0.22, 1); transition: transform 1500ms cubic-bezier(0.19, 1, 0.22, 1); transition: transform 1500ms cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 1500ms cubic-bezier(0.19, 1, 0.22, 1); } .overlay-menu ul li a:before { content: ''; position: absolute; width: 30px; height: 2px; top: 50%; left: 0px; background-color: #fff; -webkit-transform: scaleX(0) translate3d(100px, 0, 0); transform: scaleX(0) translate3d(100px, 0, 0); -webkit-transform-origin: right; transform-origin: right; -webkit-transition: -webkit-transform 300ms cubic-bezier(0.42, 0, 0.58, 1); transition: -webkit-transform 300ms cubic-bezier(0.42, 0, 0.58, 1); transition: transform 300ms cubic-bezier(0.42, 0, 0.58, 1); transition: transform 300ms cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 300ms cubic-bezier(0.42, 0, 0.58, 1); } .overlay-menu ul li a:hover:before, .overlay-menu ul li a:focus:before { -webkit-transition: -webkit-transform 600ms cubic-bezier(0.19, 1, 0.22, 1); transition: -webkit-transform 600ms cubic-bezier(0.19, 1, 0.22, 1); transition: transform 600ms cubic-bezier(0.19, 1, 0.22, 1); transition: transform 600ms cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 600ms cubic-bezier(0.19, 1, 0.22, 1); -webkit-transform: scaleX(1) translate3d(-20px, 0, 0); transform: scaleX(1) translate3d(-20px, 0, 0); } .overlay.open .overlay-menu ul li { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } .overlay .overlay-menu ul li { -webkit-transform: translate3d(5px, 40px, 0); transform: translate3d(5px, 40px, 0); opacity: 0; -webkit-transition: opacity 0ms, -webkit-transform 0ms; transition: opacity 0ms, -webkit-transform 0ms; transition: transform 0ms, opacity 0ms; transition: transform 0ms, opacity 0ms, -webkit-transform 0ms; }
// $('#toggle').click(function() { // $(this).toggleClass('active'); // $('#overlay').toggleClass('open'); // });

Related: See More


Questions / Comments: