title: Create a search animation sliding the text input part from the right to left
body: <p>I want to create a animation on search loop icon when hovering in it.First the loop only is displayed like this picture <img src="https://i.stack.imgur.com/FcXGL.jpg" alt="enter image description here"></p>
  
  <p>And when I will hover on the loop icon the text input must appear from the right inceasing its width to left and get 100% width. I tried this code </p>
  
  <pre><code>jQuery(".main_search .search-field").focusin(function() {
          jQuery(".main_search .screen-reader-text").css( "display", "none");
      });
      jQuery(".main_search .search-field").focusout(function() {
          jQuery(".main_search .screen-reader-text").css( "display", "block");
      });
  </code></pre>
  
  <p>But it looks like a bug.
  HTMl structure </p>
  
  <pre><code>&lt;div class="about_search"&gt;
                  &lt;form role="search" method="get" class="search-form" action="http://argentarius.ipoint.com.mt/"&gt;
              &lt;label&gt;
                  &lt;span class="screen-reader-text"&gt;Search for:&lt;/span&gt;
                  &lt;input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:"&gt;
              &lt;/label&gt;
              &lt;input type="submit" class="search-submit" value="Search"&gt;
          &lt;/form&gt;                &lt;/div&gt;
  </code></pre>