Как сделать плавно выезжающий блок?

div { 
  position: relative; 
  left: -70px; 
  width: 100px; 
  height: 50px; 
  background: #000; 
  margin-top: 5px; 
  transition: left .2s linear; 
} 
 
div:hover { 
  left: 0px; 
}

<div></div> 
<div></div> 
<div></div> 
<div></div>

* { 
  box-sizing: border-box; 
} 
 
ul { 
  list-style-type: none; 
  margin: 0; 
  padding: 0; 
} 
 
li { 
  display: block; 
  width: 200px; 
  height: 50px;   
  margin: 10px 0; 
  background: #ccc; 
  border: 1px solid #000; 
  border-radius: 4px; 
  cursor: pointer; 
   
  -webkit-transition: all .3s ease-in-out; 
  -moz-transition: all .3s ease-in-out; 
  -ms-transition: all .3s ease-in-out; 
  -o-transition: all .3s ease-in-out; 
  transition: all .3s ease-in-out; 
  -webkit-transform: translateX(-90%); 
  -moz-transform: translateX(-90%); 
  -ms-transform: translateX(-90%); 
  -o-transform: translateX(-90%); 
  transform: translateX(-90%); 
} 
 
li:hover { 
    -webkit-transform: translateX(0%); 
  -moz-transform: translateX(0%); 
  -ms-transform: translateX(0%); 
  -o-transform: translateX(0%); 
  transform: translateX(0%); 
}

<ul> 
  <li></li> 
  <li></li> 
  <li></li> 
  <li></li> 
</ul>

.slide-container { 
  left: 0; 
  position: absolute; 
  top: 8px; 
} 
 
.slide-container .slide { 
  background-color: #232323; 
  border: solid #777; 
  border-width: 2px 2px 2px 0; 
  color: #fff; 
  height: 48px; 
  line-height: 48px; 
  margin: 16px 0 0 -170px; 
  position: relative; 
  text-align: center; 
  width: 200px; 
  -moz-transition: margin 1s; 
  -o-transition: margin 1s; 
  -webkit-transition: margin 1s; 
  transition: margin 1s; 
} 
 
.slide-container .slide:hover { 
  margin-left: 0; 
} 
 
.slide-container .slide .slide-content { 
  float: left; 
  width: 170px; 
} 
 
.slide-container .slide .slide-header { 
  float: left; 
  width: 30px; 
  -moz-transition: opacity 1s; 
  -o-transition: opacity 1s; 
  -webkit-transition: opacity 1s; 
  transition: opacity 1s; 
} 
 
.slide-container .slide:hover .slide-header { 
  opacity: 0; 
}

<div class="slide-container"> 
  <div class="slide"> 
<div class="slide-content">Slide 1 contents</div> 
<div class="slide-header">1</div> 
  </div> 
  <div class="slide"> 
<div class="slide-content">Slide 2 contents</div> 
<div class="slide-header">2</div> 
  </div> 
  <div class="slide"> 
<div class="slide-content">Slide 3 contents</div> 
<div class="slide-header">3</div> 
  </div> 
</div>