title: CSS transitions for expanding search box
body: <p>I am trying to use CSS transitions along with simple jQuery <code>toggleClass</code> to achieve the expanding search input effect.</p>
  
  <p>My attempt has been mildly successful but still far from how I want it to be.</p>
  
  <p>I have made a JSFiddle of what I have achieved so far: <br />
  <a href="https://jsfiddle.net/3jhr24u3/" rel="nofollow noreferrer">https://jsfiddle.net/3jhr24u3/</a></p>
  
  <p>This is a GIF of what I want to achieve exactly: <br /></p>
  
  <p><a href="https://i.stack.imgur.com/4hgdJ.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4hgdJ.gif" alt="GIF screen of what I want to achieve"></a></p>
  
  <p>My HTML(as in JSFIDDLE):</p>
  
  <pre><code>&lt;form class="search-box pull-right" action="#" method="post"&gt;
      &lt;span class="icon-magnifier search-icon"&gt;&lt;img src="https://cdn0.iconfinder.com/data/icons/30_Free_Black_ToolBar_Icons/40/Black_Search.png" alt="Search" /&gt;&lt;/span&gt;
      &lt;input type="text" name="search-bar" class="search-bar" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>My CSS(as in the JSFIDDLE):</p>
  
  <pre><code>.search-box {
      position: relative;
      margin-left: 400px;
  }
  .search-icon {
      font-size: 1.875em;
      color: #1CB6B5;
      position: relative;
      float: left;
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -o-transition: all 1s ease;
      transition: all 1s ease;
  }
  .search-icon-open {
      z-index: 1000;
      color: #FFF;
      left: -290px;
  }
  .search-bar {
      background: #1cb6b5;
      border: 0 none;
      border-radius: 20px;
      width: 400px;
      height: 40px;
      color: #FFF;
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
      width: 0px;
      padding: 0;
      position: absolute;
      right: 0;
  }
  .search-bar-open {
      display: block;
      width: 400px;
      padding-left: 40px;
      padding-right: 10px;
      top: 0;
  }
  </code></pre>