title: CSS3 transition left to right
body: <p><a href="http://fiddle.jshell.net/at8eybrn/" rel="nofollow">http://fiddle.jshell.net/at8eybrn/</a></p>
  
  <p>How to set transition to go from left to right, in link above...</p>
  
  <pre><code>li a {
    display: block;
    padding: 25px;
    border-left: 5px solid black;
    transition: all .6s ease;
  }
  
  li a:hover {
    color: #fff;
  }
  
  li:first-child a{ border-left: 10px solid #3498db; }
  li:nth-child(2) a{ border-left: 10px solid #FF7832; }
  li:nth-child(3) a{ border-left: 10px solid #16C4A7; }
  li:last-child a{ border-left: 10px solid #FF7D9D; }
  
  li:first-child a:hover{ background: #3498db; }
  li:nth-child(2) a:hover{ background: #FF7832; }
  li:nth-child(3) a:hover{ background: #16C4A7; }
  li:last-child a:hover{ background: #FF7D9D; }
  </code></pre>