title: CSS: Smooth transition between hover and leaving
body: <p>This is my html code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>li.searchbar a.searchbar-text:hover {
    color: red !important;
    margin-left: -10px;
    transition: opacity .9s, margin-left .5s, margin-right .5s;
    -webkit-transition: opacity .9s, margin-left .5s, margin-right .5s;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;li class="col-sm-5 searchbar"&gt;
    &lt;a class="text-left"&gt;&lt;i class="fa fa-search" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
    &lt;a class="searchbar-text"&gt;
      &lt;span class="first-seach-text"&gt;Search France&lt;/span&gt;
      &lt;span class="second-seach-text"&gt;and beyond&lt;/span&gt;
    &lt;/a&gt;
  &lt;/li&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>With mouse hover, it moves to left smoothly, but when the mouse leaves, it moves back to right fast.(I expect smoothly).</p>
  
  <p><a href="http://jsfiddle.net/8kW7y/15/" rel="nofollow noreferrer">demo</a></p>