SlideIn and SlideOut

<!DOCTYPE html>
<html>
<head>
<style>
div#box1 {
	background: #9DCEFF;
	width: 400px;
	height: 200px;
	position: absolute;
	top: 50px;
	left: -400px;
}
</style>
<script>
function slideIn(el){
	var elem = document.getElementById(el);
	elem.style.transition = "left 0.5s ease-in 0s";
	elem.style.left = "0px";
}
function slideOut(el){
	var elem = document.getElementById(el);
	elem.style.transition = "left 0.5s ease-out 0s";
	elem.style.left = "-400px";
}
</script>
</head>
<body>
<button onclick="slideIn('box1');">slide in</button>
<button onclick="slideOut('box1');">slide out</button>
<div id="box1" class="mobileNav">
  <ul>
    <li><a href="#">Item One</a></li>
    <li><a href="#">Item One</a></li>
    <li><a href="#">Item One</a></li>
    <li><a href="#">Item One</a></li>
    <li><a href="#">Item One</a></li>
  </ul>
</div>
</body>
</html>