CSS Slider - 动画定时/过渡

Question

首先，我对CSS很新，所以我不太确定要搜索什么。我有一个非常简单的css滑块菜单。它的工作原理很好，但是在指针离开滑块后，我被要求在它滑入之前延迟几秒钟。我已经对它进行了一些修改，但无法实现我所需要的延迟。

body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, "sans-serif" !important;
  font-size: 12px;
  font-kerning: 120;
  z-index: 500;
}

.slideMenu {
  font-weight: 100;
  background: #449bb5;
  width: 140px;
  height: 100%;
  padding-right: 40px;
  position: fixed;
  z-index: 0;
  -webkit-box-shadow: -3px 0px 5px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.2);
  left: -180px;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  color: #FFFFFF;
}

.slideMenuTab {
	background: #449bb5;
	position: absolute;
	width: 40px;
	z-index: 1;
	-webkit-box-shadow: -3px 0px 5px 0px rgba(0, 0, 0, 0.2);
	box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.2);
	left: 170px;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	color: #FFFFFF;
	text-align: right;
	padding-right: 10px;
	padding-top: 10px;
	height: 30px;
	border-radius: 5px;
	cursor: pointer;

}

.slideMenu:hover, .slideMenu:focus {
  transform: translate3d(180px, 0, 0);
  animation-timing-function: 1s ease-in;
}

.slideMenu .title {
  top: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(50%);
  -ms-transform: translateY(50%);
  transform: translateY(50%);
  transform: rotate(-270deg);
  right: -12.5px;
  font-weight: 800;
  font-size: 16px;
}
.slideMenu .nav {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(50%);
  -ms-transform: translateY(50%);
  transform: translateY(-50%);
  font-weight: 300;
}
.slideMenu .nav li {
  padding-bottom: 10px;
  padding-top: 10px;
  list-style-type: none;
}

.slideMenu .nav li a {
  display: block;
  text-decoration: none;
  color: white;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  cursor: pointer;
}
.slideMenu .nav li a:hover {
  color: #aaa;
}

<div class="slideMenu">
   <div class="slideMenuTab"><img src="images/FavoriteStar.png"/></div>
    <ul class="nav">
      <li><a data-type="ticketdialogbutton" data-class="PickTicket">Create Pick</a></li>
      <hr>
      <li><a data-type="ticketdialogbutton" data-class="ReturnTicket">Create Return</a></li>
      <hr>
      <li><a data-type="ticketdialogbutton" data-class="AdjustmentTicket">Create Adjustment</a></li>
      <hr>
      <li><a data-type="ticketdialogbutton" data-class="CreateMTRTicket">Create MTR</a></li>
      <hr>
      <li><a data-type="ticketdialogbutton" data-class="ReceiveMTRTicket">Receive MTR</a></li>
      <hr>
      <li><a href="https://ecom.schwarz.com" target="_blank" data-type="ticketdialogbutton">Order Signage</a></li>
    </ul>
</div>