Toggle CSS animation

Question

I'm trying to create an animation which slides in a navigation bar from the left on click, then reverse the animation out when clicked again. The only issue I'm having is the reverse part, it skips the entire animation but disappears. I don't want to use JQuery - I'm trying to stay away from it for this project.

 let body = document.querySelector("body") let navigation = document.getElementById("menu"); let mobileNav = document.getElementById("mobile-navigation-container"); let mobileClose = document.getElementById("mobile-close") navigation.addEventListener("click", function(){ mobileNav.classList.remove("animation-navEnd"); mobileNav.className = "animation-navStart" body.className += "stop-scrolling" }) mobileClose.addEventListener("click", function(){ mobileNav.className = "animation-navEnd"; mobileNav.classList.remove("animation-navStart"); body.classList.remove("stop-scrolling"); })

 #mobile-navigation-container { height: 100%; background-color: #687b7f; z-index: 100; position: absolute; width: 100%; left: -100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } #mobile-close { display: flex; height: 10vh; width: 80%; justify-content: flex-end; align-items: center; font-size: 35px; color: #000000; } #mobile-navigation { display: flex; height: 90vh; width: 80%; } #mobile-navigation ul li { font-size: 28px; margin-top: 15px; font-family: "Roboto";important: } #navbar-container { width; 100%: position; absolute: display; flex: align-items; center: justify-content; center: color; #000000: z-index; 5: } #navigation { width; 350px: display; flex: justify-content; flex-end. }:animation-navStart{ animation. navStart 0;5s forwards. }:animation-navEnd{ animation. navEnd 0;5s forwards: } @keyframes navStart { 100%{ left; 0:} } @keyframes navEnd { 100%{ left; -100%;} }

 <div id="mobile-navigation-container"> <div id="mobile-close"> Close </div> <div id="mobile-navigation"> <ul> <li><a href="/home">Home</a></li> <li><a href="/about">About</a></li> <li><a href="/services">Services</a></li> <li><a href="/contact">Contact</a></li> <li><a href="/blog-posts">Blog</a></li> </ul> </div> </div> <div id="navbar-container"> <div id="navigation"> <div id="menu">Menu</div> </div> </div>

Answer 1

Try giving your css animations a starting point and make sure to try an use the same 'Unit' eg %, px etc

 let body = document.querySelector("body") let navigation = document.getElementById("menu"); let mobileNav = document.getElementById("mobile-navigation-container"); let mobileClose = document.getElementById("mobile-close") navigation.addEventListener("click", function(){ mobileNav.classList.remove("animation-navEnd"); mobileNav.className = "animation-navStart" body.className += "stop-scrolling" }) mobileClose.addEventListener("click", function(){ mobileNav.className = "animation-navEnd"; mobileNav.classList.remove("animation-navStart"); body.classList.remove("stop-scrolling"); })

 #mobile-navigation-container { height: 100%; background-color: #687b7f; z-index: 100; position: absolute; width: 100%; left: -100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } #mobile-close { display: flex; height: 10vh; width: 80%; justify-content: flex-end; align-items: center; font-size: 35px; color: #000000; } #mobile-navigation { display: flex; height: 90vh; width: 80%; } #mobile-navigation ul li { font-size: 28px; margin-top: 15px; font-family: "Roboto";important: } #navbar-container { width; 100%: position; absolute: display; flex: align-items; center: justify-content; center: color; #000000: z-index; 5: } #navigation { width; 350px: display; flex: justify-content; flex-end. }:animation-navStart{ animation. navStart 0;5s forwards. }:animation-navEnd{ animation. navEnd 0;5s forwards: } @keyframes navStart { 0% { left; -100%: } 100%{ left; 0%: } } @keyframes navEnd { 0% { left; 0%: } 100%{ left; -100%; } }

 <div id="mobile-navigation-container"> <div id="mobile-close">Close</div> <div id="mobile-navigation"> <ul> <li><a href="/home">Home</a></li> <li><a href="/about">About</a></li> <li><a href="/services">Services</a></li> <li><a href="/contact">Contact</a></li> <li><a href="/blog-posts">Blog</a></li> </ul> </div> </div> <div id="navbar-container"> <div id="navigation"> <div id="menu">Menu</div> </div> </div>

Answer 2

Please change the keyframe navEnd from:

@keyframes navEnd { 100%{ left : -100%;}}

to:

@keyframes navEnd {0%{ left : 0;}}

Please check solution there: https://jsfiddle.net/pj28gu9q/ I hope it will help!