title: CSS issue with right transition
body: <p>I have a piece of code I found for creating an expanding search bar.  It relies on CSS and javascript to run. The demo <a href="http://callmenick.com/lab-demos/3-expanding-search-bar/" rel="nofollow">found here</a>, has the search bar opening to the right.  I've floated mine right and want it to open on the left.  I just need another set of eyes at this point because I can't find my issue.  The issue is that it opens fine, but it doesn't transition.  It will however, transition while it closes.  </p>
  
  <p>Here it is: <a href="http://jsfiddle.net/rEsQ2/1/" rel="nofollow">http://jsfiddle.net/rEsQ2/1/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="fix" id="search-bar"&gt;
      &lt;div class="search_main fix"&gt;
          &lt;form action="http://logans.linkhousedev.net/" method="get" class="searchform" role="search" id="search"&gt;
              &lt;div id="label" class=""&gt;
                  &lt;label id="search-label" for="search-terms"&gt;search&lt;/label&gt;
              &lt;/div&gt;
              &lt;div id="input" class=""&gt;
                  &lt;input type="search" title="Search for:" name="s" value="" placeholder="Search …" class="search-field" id="search-terms" /&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#search-bar {
      top: 0;
      height: 60px;
      position: absolute;
      right: 0;
  }
  #search {
      position: absolute;
      top: 0;
      right: 0;
      width: 60px;
      height: 60px;
  }
  #label {
      width: 60px;
      height: 60px;
      position: relative;
      z-index: 20;
  }
  #label label {
      display: block;
      width: 60px;
      height: 60px;
      background: url("http://callmenick.com/lab-demos/3-expanding-search-bar/img/search.png") 0 0;
      font-size: 0;
      color: rgba(0, 0, 0, 0);
      text-indent: -9999px;
      cursor: pointer;
  }
  #label label:hover {
      background: url("http://callmenick.com/lab-demos/3-expanding-search-bar/img/search.png") -60px 0
  }
  #label.active label {
      background: url("http://callmenick.com/lab-demos/3-expanding-search-bar/img/search.png") -60px 0
  }
  #input {
      height: 60px;
      overflow: hidden;
      position: absolute;
      right: 60px;
      top: 0;
      width: 450px;
      z-index: 5;
  }
  #input input {
      display: block;
      position: absolute;
      top: 0;
      right: -450px;
      width: 430px;
      height: 100%;
      margin: 0;
      padding: 0 10px;
      border: none;
      background-color: #23688b;
      color: #fff;
      font-size: 18px;
      backface-visibility: none;
      border-radius: 0;
      transition: right 0.3s ease 0s;
  }
  #input input:focus {
      outline: none
  }
  #input.focus {
      z-index: 20
  }
  #input.focus input {
      right: 0;
      transition: right 0.3s ease 0.2s;
  }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>// get vars
  var searchEl = $("#input");
  var labelEl = $("#label");
  // register clicks and toggle classes
  labelEl.on("click", function () {
      if (searchEl.hasClass("focus")) {
          searchEl.removeClass("focus");
          labelEl.removeClass("active");
      } else {
          searchEl.addClass("focus");
          labelEl.addClass("active");
      }
  });
  // register clicks outisde search box, and toggle correct classes
  $(document).on("click", function (e) {
      var el = $(e.target);
      if (el.attr("id") != "search-terms" &amp;&amp; el.attr("id") != "search-label") {
          if (searchEl.hasClass("focus")) {
              searchEl.removeClass("focus");
              labelEl.removeClass("active");
          }
      }
  });
  </code></pre>
  
  <p>Any thoughts would be very much appreciated. </p>
  
  <p>Cheers,
  Jay </p>