title: Slide out from right on hover, slide in from left on mouse out
body: <p><a href="http://jsfiddle.net/vladimir_ze/ror4ccry/" rel="nofollow">http://jsfiddle.net/vladimir_ze/ror4ccry/</a></p>
  
  <p>I'm trying to achieve two sliding effects using CSS.</p>
  
  <ul>
  <li><p>On hover, arrow should slide out of the box (moving right), that's
  not problem.</p></li>
  <li><p>On mouse leave, arrow should slide in to the box (from left)</p></li>
  </ul>
  
  <p>I tried to do it with transitions but I'm not sure if this can be done like that, if its not, is it possible to make it with keyframes?</p>
  
  <pre><code>.arrow {
          width: 30px;
          border: 1px solid blue;
          overflow: hidden;
          margin-left: 50px;
      }
  
  i.fa {
      font-size:50px;
      -webkit-transition-duration: 1s;
      -webkit-transform: translateX(1px);
  }
  
  .arrow:hover i {
      -webkit-transition-duration: 500ms;
      -webkit-transform: translateX(30px);
  }
  
  
  &lt;div class="arrow"&gt;
     &lt;i class="fa fa-angle-right"&gt;&lt;/i&gt;
  &lt;/div&gt;
  </code></pre>